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

Question

我正在阅读 Fullstack React 书籍，在他们关于表单验证的示例中，他们创建了自己的 Field 组件（第 204 - 212 页），然后将字段值存储在 Field 状态和父状态中，这让我很困惑。他们的 Field 组件有一个value 属性以及一个包含value 的状态。父组件需要知道每个字段的值，这样它才能整体做表单验证，所以它也有一个包含value的状态。

在 Field 中，它们通过在输入 value 更改时设置 Field 状态以及在 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 属性传递）将另一个方向的值状态同步到父级：

//(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 有一个父级，有时这 parent 会想要更新我们的 Field 的 value 属性。为了允许这一点， 我们需要创建一个新的生命周期方法， getDerivedStateFromProps() 接受新值并更新 状态。”

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

Answer 1

没看过书，这里解释一下为什么要写这样的代码。

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

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

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

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