时间戳

首页 > 解决方案 > 反应 useEffect 奇怪的行为

reactjs - 反应 useEffect 奇怪的行为

问题描述

我有一个从其父级获取其状态的表单组件。表单组件仅呈现一些输入字段和其他字段。

父组件使用 useReducer 并将值向下传递给表单组件。

有两个父组件，一个允许用户使用表单创建，一个允许他们编辑。

在编辑父组件中，我使用 useEffect 从 api 获取数据并从服务器设置初始状态。

在开发构建中，当组件呈现以下错误时，它有时会中断：

超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。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 包装它，但它没有影响。

标签： reactjsreact-hooks

解决方案

对我来说看起来不错，这是一个代码框：https ://codesandbox.io/s/6jj92nm0k 。我建议将您的代码剥离为类似于此示例的内容，然后逐步恢复原始代码。

推荐阅读