如果你不想让 'useEffect' 在组件挂载时执行,可以通过在 'useEffect' 内部添加一个状态来实现。当这个状态为 'false' 时,不执行 'useEffect' 的代码,当这个状态为 'true' 时,执行 'useEffect' 的代码,并把这个状态设置为 'true',这样下次就不会再执行了。

例如:

function MyComponent() {
  const [isFirstRender, setIsFirstRender] = useState(true);

  useEffect(() => {
    if (!isFirstRender) {
      // 这里是你的代码
    } else {
      setIsFirstRender(false);
    }
  }, [/* 依赖项 */]);

  // 组件的其它代码
}

在上面的代码中,我们通过 'useState' 创建了一个名为 'isFirstRender' 的状态,并将其初始值设置为 'true'。在 'useEffect' 内部,我们首先判断 'isFirstRender' 是否为 'false',如果是,则执行 'useEffect' 内部的代码;否则,将 'isFirstRender' 设置为 'false',以便下次执行 'useEffect' 时能够正常执行。

需要注意的是,这里的依赖项数组应该根据实际情况来填写,可以是空数组、一个有值的数组或者一个动态变化的数组,以确保 'useEffect' 能够正常执行。

React useEffect 避免第一次执行:使用状态控制

原文地址: https://www.cveoy.top/t/topic/lu9E 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录