Question

我现在要做出反应，我想知道我做的是否是创建此组件的不好方法。我想知道的是：这是在setState中执行回调的正确方法吗？如果没有，应该将$（'＃editor'）。data（'kendoEditor'）。value（data）这行放在哪里？

componentDidUpdate(prevProps) {
    if(this.props.id!== prevProps.id) {
        $.get('/webapi/GetData?id=' + this.props.id, function (data) {
            this.setState({ editorValue: data }, $('#editor').data('kendoEditor').value(data)); 
        }.bind(this));
     }
}

为什么不起作用？

componentDidMount() {
    this.initEditor();
    $.get('/webapi/GetData', function (data) {
        this.setState({ data: data });
    }.bind(this));
}


 initEditor = () => {
        $("#editor").kendoEditor({ 
            value: this.state.editorValue,
        )}
    }

但这可行吗？

componentDidMount() {
    $.get('/webapi/GetData', function (data) {
        this.setState({ data: data });
        this.initEditor();
    }.bind(this));
}

Answer 1

要在setState之后正确执行回调，请遵循以下格式：

this.setState( { foo: bar }, () => callbackFunction() )

编辑

要回答问题的第二部分，您根本不需要使用这些代码行。让React处理渲染。假设您有这样的渲染器

render() {
    return(

        <div>
            <input type="text" name="someValue" data-kendoeditor={this.state.editorValue} />
        </div>

    )
}

然后按以下方式调用setState：

componentDidUpdate(prevProps) {
    if(this.props.id!== prevProps.id) {
        $.get('/webapi/GetData?id=' + this.props.id, function (data) {
            this.setState({ editorValue: data }); 
        }.bind(this));
     }
}

这会将值从state呈现给DOM。

可以在React中像这样在setState中做回调吗？

1 个答案: