我有一个表单组件从其父级获取其状态。表单组件只是呈现一些输入字段和其他字段。
父组件使用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放在root级别并用useCallback包装它,但它没有任何影响。
看起来对我好,这是一个codesandbox:https://codesandbox.io/s/6jj92nm0k。我建议将代码删除到类似于此示例的代码,然后逐步回到原始代码。