Question

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

父组件使用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对其进行包装，但这没有影响。

Answer 1

对我来说不错，这是一个密码框：https://codesandbox.io/s/6jj92nm0k。我建议将您的代码简化为类似于该示例的代码，然后逐步返回到原始代码。

反应useEffect奇怪的行为

1 个答案: