Реакция: Как использовать getDerivedStateFromProps () для установки состояния компонента. Это мешает контролируемому компоненту, который использует ту же самую переменную состояния

Question

У меня есть компонент, который получает переменную в качестве реквизита. GetDerivedStateFromProps () является типичным, это означает, что когда nextProps.someProp не равен prevState.someStateVar, эта опора присваивается переменной состояния.

У меня также есть элемент Controlled - элемент ввода текста HTML, который связан с той же переменной состояния.

Проблема в том, что когда я изменяю переменную состояния через управляемый элемент, getDerivedStateFromProps () выполняется и устанавливает значение обратно в реквизит, полученный ранее.

Как новичок React, я не понимаю, почему это происходит. Вышеуказанное действие должно происходить только при получении нового значения проп, как подсказывает название nextProps.

Пожалуйста, предложите, как получить желаемое поведение:

1. Используйте опору для установки начальное состояние
2. Пусть мой контролируемый элемент (html входной тег) устанавливает следующие значения переменной состояния
3. если получено новое значение реквизита, присвойте его следующему значению переменной состояния

Answer 1

Статья «Возможно, вам не нужно производное состояние» была верной.

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Я ссылался на пример электронной почты управляемого компонента.

Теперь данные всех дочерних компонентов хранятся в состоянии родителя , Состояние родителя передается как опора дочерним компонентам. Метод в родительском компоненте редактирует переменные состояния. Этот метод передается дочерним компонентам как подпорка.

Следовательно, единый источник истины устанавливается и сохраняется в родительском компоненте, что делает его дочерние компоненты полностью контролируемыми компонентами. Вот как я это сделал.