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

React: How to use getDerivedStateFromProps() to set component state. It interferes with controlled component that uses the same state variable

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

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

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

作为一个React新手，我不明白为什么会这样。上面的动作应该只在收到一个新的 prop 值时发生，就像名字 'nextProps' 所暗示的那样。

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

文章 - "You Probably Don't Need Derived State" 是真实的。

我参考了受控组件电子邮件示例。

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

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