React：如何使用 getDerivedStateFromProps() 设置组件状态。 它干扰使用相同状态变量的受控组件

Question

我有一个接收变量作为道具的组件。 getDerivedStateFromProps() 是典型的，这意味着当 nextProps.someProp 不等于 prevState.someStateVar 时，该道具被分配给状态变量。

我还有一个 Controlled 元素 - 一个 HTML 文本输入元素，它与相同的状态变量相关联。

问题是，当我通过受控元素更改状态变量时， getDerivedStateFromProps() 执行并将值设置回之前收到的道具。

作为 React 新手，我不明白为什么会发生这种情况。 上面的动作应该只在接收到一个新的 props 值时发生，就像名称“nextProps”所暗示的那样。

请建议如何获得所需的行为：

1. 使用 prop 设置初始状态
2. 让我的受控元素（html 输入标签）设置状态变量的下一个值
3. 如果接收到新的 prop 值，则将其分配给状态变量的下一个值

Answer 1

文章 - “你可能不需要派生状态”是真的。

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

我提到了受控组件电子邮件示例。

现在，所有子组件的数据都存储在父组件的状态中。 父组件的状态作为道具传递给子组件。 父组件中的方法编辑状态变量。 此方法作为道具传递给子组件。

因此，建立了单一事实来源并将其存储在父组件中，使其子组件完全受控。 我就是这样做的。