Как реализовать запись в state из props в функциональном компоненте?

Question

[Asker1888]

Доброго времени суток!
Есть функциональный компонент Form с некоторым количеством инпутов.
Значения по умолчанию получаю через redux с помощью mapStateToProps.
Далее, предполагается, что пользователь может изменить значения по умолчанию и отправить соответствующий запрос.
Не могу разобраться, как записывать измененные данные.
Пытаюсь делать через
const [state, setState] = useState(props.data)
но выдает объект со значениями по умолчанию (initialState), a не полученные с сервера, хотя в props нужные данные попадают. При запросе setState(props) выдает ошибку Error: Too many re-renders.
Как реализуется работа с формами функциональных компонентов?
Почему в state не записываются значения из store?

Answer 1

[paoluccio]

Можно попробовать синхронизировать локальный стэйт с данными из редакса. Структура, приблизительно, будет следующей:

const Form = props => {
  const [localData, setLocalData] = useState();

  useEffect(() => {
    setLocalData(props.reduxData);
  }, [props.reduxData]);

  return (
    // ...
  );
};

Далее, в блоке return, через onChange на полях вашей формы, обновляете локальный стэйт. По сабмиту формы или еще как-нибудь, диспатчите экшн с актуальными данными из локального стэйта.

Comments

[Asker1888]

Спасибо! Ваш ответ подсказал, что нужно последним аргументом передавать [props.somthing], а я передавал [state].