相关疑难解决方法(0)

如何更新 useEffect 中的卸载处理程序而不重复触发它?

今天,另一位开发人员向我提出了一个棘手的问题。她提出以下建议:

A.) 她想在模式关闭时触发一个事件。
B.) 她不希望该事件在任何其他时间触发。
C.) 事件必须与组件的状态保持同步。

一个基本的例子是这样的:

const ModalComponent = () => {
    const [ eventData, setEventData ] = useState({ /* default data */ });

    useEffect(() => {
        return () => {
            // happens anytime dependency array changes
            eventFire(eventdata);
        };
    }, [eventData]);
   
    return (
       <>
         // component details omitted, setEventData used in here
       </>
    );
};
Run Code Online (Sandbox Code Playgroud)

目的是当模式关闭时,事件触发。但是,用户与模态的交互会导致状态更新,从而更改 的值eventData。这就引出了问题的核心:

  1. 忽略依赖项eventData数组useEffect会导致它仅在模式关闭时触发,但该值已过时。这是安装组件时的值。
  2. 每当数据更改以及组件重新渲染和更新时,放置eventData在useEffect依赖项数组中都会导致事件反复触发useEffect。

解决这个问题的办法是什么?如何访问最新数据但仅在卸载时对其进行操作?

reactjs react-hooks

5
推荐指数
1
解决办法
1271
查看次数

标签 统计

react-hooks ×1

reactjs ×1