Javascript 如何在道具更改时让react组件获取数据

我试图让我的组件重新渲染并在道具更改时获取新数据，但我无法使其工作

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

但这是正确的做法吗？Id和名称是对应的，这意味着每次有一个新Id时，也会有一个新名称

我应该分开做吗

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之外吗？

使用componentWillReceiveProps

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

---

首先，您应该添加一个条件以防止无限循环（

setState->componentdiddupdate->setState->componentdiddupdate….

）：

您可以在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();

借

---

我认为您应该将您的道具保存在状态，然后不再使用Prop直接使用状态，请求是否已触发？你得到答复了吗？您是否遇到任何异常？在

setState

回调中调用

this.initComponentsDropdownlist（）

，否则它可以处理旧数据。您可以提供一个示例吗？

componentWillReceiveProps

不推荐使用。它在react 16+中已弃用，那么我应该使用什么？当我使用shouldComponentUpdate时，似乎没有设置状态。componentWillReceiveProps（）如果使用react 15，那么使用componentWillReceiveProps我尝试过这个，它似乎应该可以工作？但在我的编辑器中，数据所在的状态似乎没有更新。因为它使用的是值状态。您能给我们展示一下方法

initComponentsDropdownlist

中的代码吗？它是否使用变量

this.state.value

？我用使用该变量的组件更新了帖子。很抱歉，InitComponentDropDownList错误，应该是使用该值的编辑器。此编辑器包似乎存在更新问题。。。我试图删除编辑器，状态完全改变了。我怎样才能解决这个问题？我真的不知道剑道库，你有这个组件文档的链接吗？

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

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

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

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