渲染组件后,我正在调用updateResults方法,该方法将调用setState,此后将调用getDerivedState并返回null,仍然更新状态并调用render和componentDidUpdate。
根据docs,它不应该发生。有人可以解释为什么会这样吗?
class Results extends React.Component{
constructor(props){
super(props);
this.state = {"query":props.data.web_query,"other_fields":props.other_fields};
}
static getDerivedStateFromProps(props, state) {
if (state.query != props.data.web_query) {
console.log("Returning new state as expected");
state.query = props.data.web_query;
return state;
}
console.log("Returning null, shouldn't change state, but changing");
return null;
}
componentDidUpdate() {
console.log("Componenent Did update");
}
updateResults(){
let results = someAjaxCall();
this.setState({"query":results.data.webquery,
"other_fields":results.other_fields});
}
render(){
<SomeComponent updateCall={this.updateResults}/>
}
}
另外,请解释一下setState与getDerivedStateFromProps和shouldComponentUpdate之间的关系吗?
最佳答案
我认为您不了解getDerivedStateFromProps()的用途
如果道具更改,则此方法用于更新状态。
即使在setState之后调用该方法,如果getDerivedStateFromProps返回null,则状态将使用setState中的数据进行更新,但是getDerivedStateFromProps可以覆盖某些属性。