时间戳

首页 > 解决方案 > 使用效果仅在状态变为 false 时运行

javascript - 使用效果仅在状态变为 false 时运行

问题描述

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

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

我有一个 useEffect 功能

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

我希望每次我的 isModalOpen 变为假时运行我的使用效果（只有假）

我写

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

但是每次 isModalOpen 更改时都会运行此方法（true 为 false 或 false 为 true）

标签： javascriptreactjstypescriptreact-hooksuse-effect

解决方案

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

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

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

},[isModalOpen]);

但是，如果在某些时候您想同时访问 useEffect 中的旧值和新值，您可以实现一个usePrevious钩子，如React Hook 常见问题解答中所述

推荐阅读