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

Question

I'm reading the Fullstack React book, and in their example on form validation, they create their own Field component (pg. 204 - 212), and then store the field value in both the Field state and parent state, which is confusing to me. Their Field component has a value prop as well as a state containing value . The parent component needs to know about each field value, so that it can do form validation as a whole, and so it also has a state containing value .

Within Field, they handle value changes by both setting the Field state when the input value changes, and by using getDerivedStateFromProps when the value prop changes:

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

They also sync the value state in the other direction to the parent by calling the parent's onInputChange function (passed as the 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});
};

The book doesn't really explain why they duplicate the state like this, except to say,

"There are only two pieces of data that Field will need, the current value and error. Like in previous sections where our form component needed that data for its render() method, so too does our Field component."

and also

"One key difference is that our Field has a parent, and sometimes this parent will want to update the value prop of our Field. To allow this, we'll need to create a new lifecycle method, getDerivedStateFromProps() to accept the new value and update the state."

I'm just a beginner, but in my mind, it would make more sense to ditch the value state altogether within Field, and have it just passed in as a prop. When the input changes, call the onChange method with Field, and call parent's onInputChange within that. Have onInputChange update the parent state about the field's value, and pass down the field value as a prop to the field. The way it's done now seems sort of redundant and more error prone. Any insight as to why they do it this way?

Answer 1

Haven't read the book, but here I will explain why I would write such a code.

The main point in having the two states is to make the Field component more generic.

In that specific case, the parent happens to also save the value in his state, and the Field component becomes a controlled component by updating his state from the received props on getDerivedStateFromProps .

However there is still the possibility to use the Field component as an uncontrolled component, then the Field 's state would be the only source of truth.

In both cases there's only a single source of truth, which maintains React's way of doing things, however the Field component can be used in both a controlled and uncontrolled form.