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

Question

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

我还有一个受控元素——一个与同一个状态变量相关联的 HTML 文本输入元素。

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

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

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

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

Answer 1

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

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

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

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

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