javascript - use effect 仅在状态变为 false 时运行

Question

我使用 React，我有一个名为 isModalOpen 的状态。

const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

我有一个 useEffect 函数

useEffect(() => {},[]);

我希望每次我的 isModalOpen 变为false(仅 false)时运行我的使用效果

我写了

useEffect(()=>{},[!isModalOpen])

但是这个方法在每次 isModalOpen 改变时运行(true 到 false 或 false 到 true)

Answer 1

useEffect 的依赖数组是为了通知 useEffect 在值发生变化时运行。因此，无论您传递 isModalOpen 还是 !isModalOpen，它都是一回事，因为它只是检查值是否已更改，即 false 变为 true 或 true 变为 false。

有条件地执行某事的方法是在回调函数中添加一个条件

useEffect(()=>{
    if(!isModalOpen) {
        // write your code here
    }

},[isModalOpen]);

但是，如果在某些时候您想在 useEffect 中同时访问旧值和新值，您可以实现一个 usePrevious Hook ，如 React Hook FAQs 中所述。