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

Question

我正在阅读Fullstack React一书，在他们关于表单验证的示例中，他们创建了自己的字段组件（第204-212页），然后将字段值存储在字段状态和父状态中，这让我感到困惑。它们的字段组件有一个值属性以及一个包含值的状态。父组件需要知道每个字段值，这样它就可以作为一个整体进行表单验证，并且它还有一个包含值的状态。

在字段内，它们通过在输入值更改时设置字段状态，以及在值属性更改时使用getDerivedStateFromProps来处理值更改：

//(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});
};

这本书并没有真正解释为什么他们会这样复制这个州，除了说，

字段只需要两段数据，即当前值和错误。与前面几节中表单组件的render（）方法需要这些数据一样，字段组件也需要这些数据

而且还

“一个关键的区别是，我们的字段有一个父字段，有时这个父字段会想更新字段的值属性。为此，我们需要创建一个新的生命周期方法getDerivedStateFromProps（），以接受新值并更新状态。”

我只是一个初学者，但在我看来，在Field中完全抛弃value状态并将其作为道具传递进来会更有意义。当输入更改时，使用Field调用onChange方法，并在其中调用父方法的onInputChange。让onInputChange更新有关字段值的父状态，并将字段值作为道具传递给字段。现在这样做似乎有点多余，更容易出错。知道他们为什么这样做吗？

Answer 1

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

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

在这种情况下，父级碰巧也将值保存在他的状态中，并且Field组件通过从getDerivedStateFromProps上接收的props更新他的状态而成为受控组件。

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

在这两种情况下，只有一个真相来源，它维持React的做事方式，但是字段组件可以以受控和非受控的形式使用。