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

Posted 2023-04-14

技术标签:

【中文标题】React Hook - 无法在子组件 onComplete 回调中调用父组件调度【英文标题】：React Hook - Cannot Call Parent Component Dispatch in Child Component onComplete Callback 【发布时间】：2021-07-24 20:50:42 【问题描述】：

我已经尝试了几种解决方案来解决这个问题，但都没有奏效。

我有一个第三方库，它调用异步函数来加载要在 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。

就是这样。

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

【问题讨论】：

是否可以使用您提供的代码重现错误？您不会收到类型错误说“调度不是函数”吗？不，目前的形式是不可能的。这是正在使用的代码的粗略草图。 dispatch 部分是使用 React.createContext 和 React.useReducer 创建的另一个组件 【参考方案1】：

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

我在这里提供的错误是由于我如何切换状态而出现的组件初始化顺序的结果。

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