реагировать / функциональный компонент / реквизиты изменены / getDerivedStateFromProps - PullRequest
Новая
       6

реагировать / функциональный компонент / реквизиты изменены / getDerivedStateFromProps

0 голосов
/ 22 марта 2019

Допустим, я работаю над простым CRUD-приложением. Мой функциональный компонент - это просто форма.

  • В случае CREATE я передаю пустой объект через реквизит
  • В случае UPDATE я передаю объект со значениями через props (я получил данные в родительском компоненте с помощью вызова API)

Я выгляжу так: 

const MyForm = (props) => {

 const [myValues, setMyValues] = useState(props.myValues);
 const [errors, setErrors] = useState(0);
 (...)
}

В случае ОБНОВЛЕНИЯ я сталкиваюсь (конечно) с проблемой, что props.myValues ​​все еще пуст, когда компонент монтируется, и не устанавливается снова (обновляется), когда вызов API из родительского компонента завершен, таким образом оставляя значения формы пустые.

Используя компонент класса, я бы решил это с помощью getDerivedStateFromProps () . Есть ли что-то подобное в функциональном компоненте? Или я делаю это неправильно с самого начала? Спасибо за любой совет!

Ответы [ 2 ]

1 голос
/ 22 марта 2019

Да, вы можете, конечно, использовать useEffect.

В вашем случае код должен выглядеть так: 

const MyForm = (props) => {

 const [myValues, setMyValues] = useState(props.myValues);
 const [errors, setErrors] = useState(0);

 useEffect(() => {
   setMyValues(props.myValues);
 }, [props.myValues]);

}
0 голосов
/ 22 марта 2019

Когда вы пишете: 

const [myValues, setMyValues] = useState(props.myValues);

, реквизиты myValues ​​используются только для инициализации состояния myValues.Дэн Абрамов относится к этому пункту в своей последней статье .
. Я бы предложил:
1. Переименовать реквизит myValues ​​в initialValues ​​
2. Вызвать API после отправки и изменить свое состояние в соответствии ск результату.

Это будет выглядеть так: 

const MyForm = (props) => {
  const { initialValues, onSubmit } = this.props
  const [myValues, setMyValues] = useState(initialValues);
  ...
  const handleSubmit = () => {
     // Assume that onSubmit is a call to Fetch API
     onSubmit(myValues).then(response => response.json())
                       .then(updatedValues => setMyValues(updatedValues)) 
  }
}
...