我正在尝试使用Draft JS构建一个内容编辑器。具体功能是从像Facebook这样的URL中提取数据。但是我在这个部分卡住了,回调函数无法正常工作。
首先,我使用
如果回调函数不起作用,组件将无法渲染。 我不知道这是否是一个基本的JavaScript问题。但问题是,我想从我的服务器获取url数据,并且我必须通过props传递数据到我的组件并进行渲染。
答案更新:
首先,我使用
compositeDecorator
将我的状态进行了包装,就像这样:constructor(props) {
super(props);
const compositeDecorator = new CompositeDecorator([
.... {
strategy: linkStrategy,
component: decorateComponentWithProps(linkComp, {
passit
})
}
....
]);
}
// This is my strategy
function linkStrategy(contentBlock, callback, contentState) {
findLinkInText(LINK_REGEX, contentBlock, callback)
}
function findLinkInText(regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr, start;
if ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
let URL = matchArr[0];
console.log(URL);
axios.post('/url', {
url: URL
}).then(response => {
passit = response.data
//not working
callback(start, start + URL.length)
})
//working
callback(start, start + URL.length)
}
}
如果回调函数不起作用,组件将无法渲染。 我不知道这是否是一个基本的JavaScript问题。但问题是,我想从我的服务器获取url数据,并且我必须通过props传递数据到我的组件并进行渲染。
答案更新:
function findLinkInText(regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr, start;
if ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
let url = matchArr[0];
axios.post('/url', {
url: URL
}).then(response => {
passit = response.data
handleWithAxiosCallBack(start, start + matchArr[0].length, callback)
}).catch(err => console.log(err))
}
}
function handleWithAxiosCallBack(start, startLength, callback) {
console.log(callback); //Spits out the function But Not working
callback(start, startLength)
}
/url
请求? - Jiang YD