У меня есть компонент формы, который получает свое состояние от своего родителя.Компонент формы просто отображает несколько полей ввода и другие.
Родительский компонент использует useReducer и передает значения в компонент формы.
Существует два родительских компонента, один из которых позволяет пользователю создаватьс формой и той, которая позволяет им редактировать.
В родительском компоненте редактирования я использую useEffect для извлечения данных из API и установки начального состояния с сервера.
При разработке иногда создайте егопрерывается, когда компонент отображается со следующей ошибкой:
Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.
, и в производственной сборке он прерывается каждый раз при визуализации компонента.
const Form = ({ state, dispatch }) => {
return ...form elements;
}
const ParentComponent = ({ match }) => {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
fetchData = async () => {
const data = await apiCall(match.params.id);
dispatch({ type: 'overwrite', value: data });
}
fetchData();
}, [match.params.id]);
return <Form state={state} dispatch={dispatch} />
}
Понятия не имею, что я делаюнеправильно.Я также пытался поместить fetchData на корневой уровень и обернуть его с помощью useCallback, но это никак не отразилось.