reactjs - 为什么通过父道具和组件onChange更新表单值状态？

Question

我正在阅读Fullstack React书，在他们的表单验证示例中，他们创建了自己的Field组件（第204-212页），然后将字段值存储在Field状态和父状态中，这让人感到困惑。我。 它们的Field组件具有value prop和包含value的状态。 父组件需要知道每个字段值，以便它可以作为整体进行表单验证，因此它还具有包含value的状态。

在现场，他们处理value由双方设置现场状态输入时改变value变化，并通过使用getDerivedStateFromProps的当value道具的变化：

//(within Field)
getDerivedStateFromProps(nextProps) {
     return {value: nextProps.value}
}

onChange = evt => {
    const name = this.props.name;
    const value = evt.target.value;
    const error = this.props.validate ? this.props.validate(value) : false;

    this.setState({value, error});

    this.props.onChange({name, value, error});
};

它们还通过调用父的onInputChange函数（作为onChange prop传递）将另一个方向的值状态同步到父级：

//(within parent component)
onInputChange = ({name, value, error}) => {
    const fields = Object.assign({}, this.state.fields);
    const fieldErrors = Object.assign({}, this.state.fieldErrors);

    fields[name] = value;
    fieldErrors[name] = error;

    this.setState({fields, fieldErrors});
};

这本书并没有真正解释为什么他们像这样复制国家，除了说，

“Field只需要两个数据，当前值和错误。就像我们的表单组件需要其render（）方法的数据的前几节一样，我们的Field组件也是如此。”

并且

“一个关键的区别是我们的Field有一个父级，有时这个父级会想要更新我们Field的值prop。为此，我们需要创建一个新的生命周期方法，getDerivedStateFromProps（）来接受新值并更新州。“

我只是一个初学者，但在我看来，在Field中完全抛弃value状态更有意义，并将它作为道具传递出来。 当输入改变时，用Field调用onChange方法，并在其中调用parent的onInputChange。 让onInputChange更新关于字段值的父状态，并将字段值作为prop传递给字段。 它现在的方式似乎有点冗余，更容易出错。 有关他们为何这样做的任何见解？

Answer 1

没有读过这本书，但在这里我将解释为什么我会编写这样的代码。

拥有这两种状态的要点是使Field组件更通用。

在该特定情况下，父节点也恰好将值保存在其状态中，并且Field组件通过在getDerivedStateFromProps上从接收到的props更新其状态而成为受控组件。

然而，仍然有可能将Field组件用作不受控制的组件，那么Field的状态将是唯一的事实来源。

在这两种情况下，只有一个单一的事实来源，它保持了React的做事方式，但是Field组件可以以受控和不受控制的形式使用。