Реагируйте useEffect странное поведение - PullRequest
0 голосов
/ 21 марта 2019

У меня есть компонент формы, который получает свое состояние от своего родителя.Компонент формы просто отображает несколько полей ввода и другие.

Родительский компонент использует 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, но это никак не отразилось.

1 Ответ

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

Выглядит хорошо для меня, вот код и окно: https://codesandbox.io/s/6jj92nm0k. Я предлагаю свести ваш код к чему-то похожему на этот пример и вернуться к исходному коду, шаг за шагом.

...