是否有一种方法可以管理组件内同步工作的数据互连挂钩？

Question

由于我刚开始反应，请给出你的想法......

我有两个钩子：

const {data, setData} = useHook1();

const hook2data = useHook2(data.name,{...options});

我将上述两个钩子放在一个组件中。

当我将值设置为 data.name 时，useHook2 钩子会进行 API 调用，然后返回一些值。接收到的值又需要使用 setData 设置为 useHook1。

如果我尝试使用setData，则会发生无限渲染，并且我的组件会出现错误。

我可以建议在同一组件中处理两个钩子吗？

我没有使用我的代码 useEffect

Answer 1

您遇到的问题是由两个钩子之间的相互依赖引起的。

使用 useEffect 解决此问题是处理这种情况的正确方法。

import { useEffect,useState } from 'react';

function MyComponent() {
  const { data, setData } = useState();
  const [hook2Result, setHook2Result] = useState(null);

  // Trigger `useHook2` whenever `data.name` changes
  useEffect(() => {
    if (data.name) { // Prevent unnecessary calls if data.name is null/undefined
      const fetchData = async () => {
        try {
          const result = await useHook2(data.name, { ...options });
          setHook2Result(result);
          // Update `useHook1` data if necessary
          setData((prevData) => ({
            ...prevData,
            someOtherKey: result.someValue, // Update specific fields
          }));
        } catch (error) {
          console.error("Error in useHook2:", error);
        }
      };

      fetchData();
    }
  }, [data.name, setData]); // Re-run only when `data.name` changes

  return (
    <div>
      <p>Hook1 Data: {JSON.stringify(data)}</p>
      <p>Hook2 Result: {JSON.stringify(hook2Result)}</p>
    </div>
  );
}

作为初学者，您需要知道为什么会发生这种情况：

• 发生您的问题是因为只要状态发生变化，React 就会重新渲染组件，因此 useHook2 会使用更新的数据再次运行，因为它依赖于您的 useHook1 值，因此会创建无限循环。