actjs - Почему состояние значения формы обновляется через родительский реквизит и компонент onChange?

Question

Я читаю книгу Fullstack React, и в своем примере проверки формы они создают свой собственный компонент Field (стр. 204 - 212), а затем сохраняют значение поля как в поле Field, так и в родительском состоянии, чтосмущает меня.Их полевой компонент имеет value опору, а также состояние, содержащее 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):

//(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».

, а также

"Одним из ключевых отличий является то, что у нашего поля есть родительский элемент, и иногда этот родительский объект захочет обновить значение prop нашего поля.При этом нам нужно создать новый метод жизненного цикла, getDerivedStateFromProps (), чтобы принять новое значение и обновить состояние. "

Я просто новичок, но, по-моему, этобыло бы больше смысла полностью отказаться от состояния value в пределах Поля, и оно было бы просто передано как опора.Когда входные данные изменяются, вызовите метод onChange с Field и вызовите родительский onInputChange в этом поле.Пусть onInputChange обновит родительское состояние о значении поля и передаст значение поля как опору для поля.То, как это делается сейчас, кажется излишним и более подверженным ошибкам.Любое понимание того, почему они делают это таким образом?

Answer 1

Не читал книгу, но здесь я объясню, почему я написал бы такой код.

Главное в двух состояниях состоит в том, чтобы сделать компонент Field более общим.

В этом конкретном случае родительский элемент также сохраняет значение в своем состоянии, и компонент Field становится управляемым компонентом, обновляя его состояние из полученного props в getDerivedStateFromProps.

Однако все еще есть возможность использовать компонент Field в качестве неконтролируемого компонента, тогда состояние Field будет единственным источником истины.

В обоих случаях естьтолько один источник правды, который поддерживает стиль действий React, однако компонент Field может использоваться как в контролируемой, так и в неконтролируемой форме.