Question

在渲染组件之后，我正在调用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的关系吗？

Answer 1

我认为您不了解getDerivedStateFromProps（）的目的

该属性用于在道具更改时更新状态。

即使在setState之后调用该方法，如果getDerivedStateFromProps返回null，状态也将使用setState中的数据进行更新，但getDerivedStateFromProps可以覆盖某些属性。

在React 16.7中，在setState调用之后，返回null的getDerivedStateFromProps也正在更新状态

1 个答案: