React Hook - 无法在子组件 onComplete 回调中调用父组件调度

Question

我尝试了多种解决方案来解决这个问题，none 都奏效了。

我有一个第三方库调用异步函数来加载要在 DOM 中呈现的内容。

我有一个组件为 DOM 片段包装库，当它完成时我希望能够用它调用 onComplete 方法。

一切正常。但是，当我调用 onComplete 函数时，然后在该函数内部调用 dispatch 某些东西到 context 它爆炸并给了我

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

代码

export function ParentComponent(props: any) {
    const dispatch: any = React.useContext(dispatchContext);
    const onComplete = React.useCallback(
        (data: any) => {
            if (dispatch !== null && dispatch !== undefined) {
                dispatch({
                    payload: { new_data: "thing" },
                    type: dispatchType.UPDATING
                });
            }
        },
        [dispatch]
    );

    return (
        <div>
            <ChildComponent onComplete={onComplete} />
        </div>
    );
}
interface IProp {
    onComplete?: function;
}
export function ChildComponent(props: IProp) {
    React.useEffect(() => {
        if (library.is_ready) {
            library.load(data).then(
                () => {
                    console.log("Success");
                    props.onComplete(library);
                },
                (error: any) => {
                    console.error("ERROR");
                }
            );
        }
    }, [library]);

    return <div id="library-dom-element"></div>;
}

如果我注释掉 dispatch 函数，它就不会爆炸。

当异步函数完成并调用onComplete函数调用dispatch

时炸毁

ChildComponent.libary.is_ready→ChildComponent.libary.load→ChildComponent.libary.onComplete→ParentComponent.onComplete→dispatch

我已经尝试将 useCallback 添加到所有内容中。我尝试使用 useRef 来跟踪 is_mounted 变量以确定 DOM 片段是否正确加载。

我只是不知道如何在第三方库完成时调用dispatch。

就是这样。

任何人都可以帮助或提供这方面的指导吗？我以为我了解这些部分是如何协同工作的，但我遗漏了一些东西。

Answer 1

我制作的应用程序非常复杂。

我在此处提供的错误是由于我切换状态的方式而出现的组件初始化顺序的结果。

当我创建一个延迟函数来帮助初始化缓冲区时，这暂时解决了这个问题。

对于这个问题，我们深表歉意，因为设计模式似乎确实有效，只需要考虑如何管理 React 应用程序的复杂性。

感谢所有看过的人:) <3

React Hook - 无法在子组件 onComplete 回调中调用父组件调度

React Hook - Cannot Call Parent Component Dispatch in Child Component onComplete Callback

javascript

typescript

reactjs

react-context

react-hooks

代码