反应使用效果怪异的行为

Question

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

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

有两个父组件，一个使用户可以使用表单创建，一个使其可以编辑。

在"编辑父"组件中我使用使用效果从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。我建议将您的代码删除到类似于此景象的内容，然后逐步返回原始代码。