当我在componentWillUpdate 中setState 时，componentWillUpdate 在无限循环中运行，并且不会停止被触发。
这永远不会让我的render 有机会反映我的更改。如果我不应该使用componentWillUpdate，我该如何更改状态？
编辑：我已经有了一些理解，setState 不应该在 componentWillUpdate 中调用。我只是很困惑我应该做些什么作为替代方案。
编辑#2：我从componentWillReceiveProps 开始，但是当我的父组件更改状态时，我似乎无法触发此功能。我将来自父母的状态作为道具提供给我的孩子。
【问题讨论】：
标签： javascript reactjs
首先要做的是查看此方法的官方文档 (link)。当函数被实际调用时，你可以在哪里阅读。
然后阅读常见错误（注）：
您不能在此方法中使用 this.setState()。如果您需要更新状态以响应 prop 更改，请改用 componentWillReceiveProps。
你改变状态，React 会自动调用componentWillUpdate。
【讨论】：
<div> <h1>This room is currently {this.props.roomId}</h1> <SongQueue queue={this.state.queue}/> <Search addSongToQueue={this.addSongToQueue}/> </div> this.state.queue 正在改变，但我的孩子SongQueue 似乎无法正确接收它。这是我的第一个主要父组件的render。
我知道在guide 中会警告这一点，但我不确定从componentWillUpdate 中调用setState 是否会出现问题。诚然，它可能会导致无限递归除非当然你提供了该递归的底部（一种打破它的方法）。例如。一种方法是检查componentWillUpdate 中的第二个（nextState）参数，如果满足某些条件（即递归结束时），则不再调用setState。
作为一个最小的例子，想象一个完全没有属性的组件，只有两个状态。进一步想象第二个状态是从第一个异步获得的。例如。第一个状态可以是提供给 Ajax 调用的一些参数，第二个状态是该调用的结果。所以基本上你调用this.setState 来配置参数，然后在componentWillUpdate 中你可以做如下的事情（为了简单起见，我使用window.setTimeout 作为Ajax 调用的占位符）：
const ComponentWithAsyncState = React.createClass({
getInitialState: function() {
return {
ajaxParams: '',
ajaxResult: ''
};
},
setAjaxParams: function(params) {
this.setState({ajaxParams: params});
},
componentWillUpdate: function(_, nextState) {
if (nextState.ajaxParams!=this.state.ajaxParams)
window.setTimeout(function imagineThisIsAjax() {
this.setState({ajaxResult: `result from ${nextState.ajaxParams}`});
}.bind(this), 2000);
},
当（例如通过此组件管理的某些控件）ajaxParams 更改时，操作顺序将类似于（其中~~> 表示异步）：
setAjaxParams --> this.setState --> componentWillUpdate ~~> imagineThisIsAjax --> this.setState --> componentWillUpdate
即对componentWillUpdate 的第二次调用不会导致进一步的this.setState，因此递归将在那里结束。
【讨论】：