Question

我正在尝试更改道具时重新渲染组件并获取新数据，但是我无法使其工作。

export default class InfoTagEditor extends React.PureComponent<Props, State> {
    componentDidUpdate() {
        $.get('/webapi/getData?componentId=' + this.props.id, function (data) {
            this.setState({value: data});
            this.initComponentsDropdownlist();
        }.bind(this));
    }
}

但这根本不会更新状态...

有人知道怎么了吗？

渲染功能中的Kendo编辑器：

Render(){
    return   <Editor
    name={"Editor"}
    value={this.state.value}
    change={this.onChangeEditor}
    resizable={true}
    />
}

对我有用的是：

shouldComponentUpdate(nextProps)
{
    if (this.props.Id !== nextProps.Id) {
        $.get('/webapi/GetData?Id=' + nextProps.Id, function (data) {
            this.setState({value: data});
            $('#editor').data('kendoEditor').value(this.state.value)
            return true;
        }.bind(this));
    }

    if (this.props.name !== nextProps.name) {
        return true;
    }

    return false;
}

但这是这样做的正确方法吗？ Id和Name是对应的，这意味着每当有一个新的ID时，也会有一个新的Name。

我应该分开做

this.setState({ value: data });
$('#editor').data('kendoEditor').value(this.state.value)

或

 this.setState({ value: data },  
 $('#editor').data('kendoEditor').value(this.state.value));

设法完成这项工作：

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));
     }
}

这是进行回调的正确方法吗？看起来还好吗？ :)还是应该将$（'＃editor'）。data（'kendoEditor'）。value（data）移到setState之外？

Answer 1

首先，您应该添加一个条件以防止无限循环（setState -> componentDidUpdate -> setState -> componentDidUpdate ....）：https://reactjs.org/docs/react-component.html#componentdidupdate

您可以在componentDidUpdate（）中立即调用setState（），但请注意，必须将其包装在如上例中所示的条件下，否则会导致无限循环

这是一个可能的解决方案

componentDidUpdate(prevProps) {
    if(this.props.id !== prevProps.id) {
        $.get('/webapi/getData?componentId=' + this.props.id, (data) => {
           this.setState({ value: data });
           this.initComponentsDropdownlist();
        });
     }
}

请注意，如果方法initComponentsDropdownlist使用this.state.value，则应在setState完成时调用它，因此应替换：

this.setState({ value: data });
this.initComponentsDropdownlist();

通过

 this.setState({ value: data }, this.initComponentsDropdownlist);

Answer 2

使用componentWillReceiveProps

sc: [1 2 1 0.5000 0.0100 0.0300]
 A: [2×4 double]
 T: 2

Answer 3

使用props时，并且要更改props时，您想做点什么，就应该使用componentWillReceiveProps()。 注意：现在已不复存在，但是如果您使用的是较早版本的react，则可以在主要发布版本（即版本17.x）之前使用它。

componentWillReceiveProps(nextProps){
   if(nextProps.id!==this.props.id){
      $.get('/webapi/getData?componentId=' + nextProps.id, function(data){
        this.setState({ value: data });
        this.initComponentsDropdownlist();
      }.bind(this));
   }
}

对于最新的React版本，您应该使用static getDerivedStateFromProps(nextProps, prevState)，Ref

static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.id!==this.props.id){
        $.get('/webapi/getData?componentId=' + nextProps.id, function(data){
            this.setState({ value: data });
            this.initComponentsDropdownlist();
          }.bind(this));
    }
}

更改道具后如何使React组件获取数据

3 个答案: