时间戳

首页 > 解决方案 > 从 useState 设置状态而不触发 useEffect 钩子

javascript - 从 useState 设置状态而不触发 useEffect 钩子

问题描述

问题

我想防止触发在依赖数组中包含 useState 值的 useEffect 挂钩。为了清楚起见，请看示例。

详细解释

在初始化过程中，表单会设置一些值，因此我定义了一个标志以防止在完全初始化之前执行其他效果，但我也不想在初始化标志状态更改时触发第二个效果。

我可以以某种方式阻止对这种isInitialization状态的跟踪吗？ 我找不到可以解决我的问题的线程。您是否愿意链接与此相关的线程？提前致谢。

例子

export function SomeComponent(props) {
  const [form] = useForm();
  const [settings, setSettings] = useState(props.initialSettings);
  const [isInitialization, setIsInitialization] = useState(true);

  /**
   * Updates the form settings state, just for initialization
   */
  useEffect(() => {
    if (isInitialization) {
      form.setFieldsValue({
        ...settings,
      });
      setIsInitialization(false); // <-- This should not trigger any useEffect
    }
  }, [settings, form, isInitialization]);

  useEffect(() => {
    if (props.settingsChanges && !isInitialization) {
      props.settingsChanges(settings, isValid && hasRequiredFields);
    }
  }, [settings, props, isInitialization]);
}

标签： javascriptreactjs

解决方案

尝试isInitialization从依赖数组中删除。

  useEffect(() => {
    if (isInitialization) {
      form.setFieldsValue({
        ...settings,
      });
      setIsInitialization(false); // <-- This should not trigger any useEffect
    }
  }, [settings, form]);

正如 React 文档所说：

如果你想运行一个效果并且只清理一次（在挂载和卸载时），你可以传递一个空数组（[]）作为第二个参数。这告诉 React 你的效果不依赖于任何来自 props 或 state 的值，所以它永远不需要重新运行。这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。

更新：

建立自己的钩子

构建自己的 Hooks 可以让您将组件逻辑提取到可重用的函数中。

如果是通用逻辑，那么您可以创建自定义钩子并跨组件共享。

«useMyCustomHook.jsx» 文件：

import { useEffect } from 'react';

export default function useMyCustomHook(str) {
  useEffect(() => {
      console.log(`title`, title);
  });
}

然后在组件中使用它：

function fooFunction(props) {
  const [firstName, setFirstName] = useState('');

  useMyCustomHook(`This is ${firstName}`);

  return (        
      <div>The firstname is {firstName}</div>
  );
}

推荐阅读