reactjs - 正确使用React getDerivedStateFromProps

Question

在此示例中

https://codepen.io/ismail-codar/pen/QrXJgE?editors=1011

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("nextProps", nextProps, "\nprevState", prevState)
    if(nextProps.count !== prevState.count)
      return {count: nextProps.count};
    else
      return null;
  }
  handleIncrease(e) {
    this.setState({count: this.state.count + 1})
  }
  handleDecrease(e) {
    this.setState({count: this.state.count - 1})
  }
  render() {
    return <div>
      <button onClick={this.handleIncrease.bind(this)}>+</button>
      {this.state.count}
      <button onClick={this.handleDecrease.bind(this)}>-</button>
    </div>;
  }
}

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { initialCount: 1 };
  }
  handleChange(e) {
    this.setState({initialCount: e.target.value})
  }
  render() {
    return <div>
      <Counter count={this.state.initialCount} />
      <hr/>
      Change initial:<input type="number" onChange={this.handleChange.bind(this)} value={this.state.initialCount} />
    </div>
  }
}

ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);

预计:单击+/-按钮和文本框更改必须更新计数

目前:主组件将初始计数存储在自己的状态中，并将初始计数传递给子计数器组件。

如果从文本框触发handleChange并且更新initialCount，子计数器组件也会正确更新，因为getDerivedStateFromProps静态方法提供了这个。

但是通过handleIncrease和handleDecrease方法更新本地状态来更改Counter组件中的计数值是很有效的。

问题是 getDerivedStateFromProps 这次重新触发并重置计数值。但我没想到这一点，因为 Counter 组件本地状态更新父 Main 组件没有更新。 UNSAFE_componentWillReceiveProps 就是这样工作的。

总结我的 getDerivedStateFromProps 用法不正确，或者对于我的场景有其他解决方案。

此版本https://codepen.io/ismail-codar/pen/gzVZqm?editors=1011与 componentWillReceiveProps 配合使用很好

Answer 1

尝试像您一样将状态“同步”到 props 非常容易出错，并会导致应用程序出现错误。

事实上，甚至你的 example with componentWillReceiveProps其中有一个错误。
如果您更频繁地重新渲染父组件，您将丢失用户输入。

这是一个demo of the bug 。增加计数器，然后单击“演示错误”，它将吹走计数器。但该按钮的 setState 应该完全无关。

这说明为什么尝试将状态同步到 Prop 是一个坏主意，应该避免。

相反，请尝试以下方法之一:

1. 您可以使组件完全由父 props“控制”并删除本地状态。

2. 或者，您可以使组件完全“不受控制”，并在必要时通过为子组件提供不同的键来重置子组件的状态。

这两种方法均在 this article on the React blog about avoiding deriving state 中进行了描述。 。该博客文章包含带有演示的详细示例，因此我强烈建议您查看一下。