如何重新初始化 React 钩子

Question

我有一个页面，我根据 id 显示来自 API 的数据。我正在使用 React Query 来管理数据的存储。我想做的是当带有 id 的输入被更改时，我想重新获取不同对象的数据。我尝试执行以下操作：

const useData = (id: string) => useQuery(
  ['data', id],
  () => axios.get(`/api/data/${id}`),
  {
    enabled: !!id,
  },
);

const Page = () => {
  const [id, setID] = useState('1');
  const [result, setResult] = useState(useData(id));

  useEffect(() => {
    setResult(useData(id));
  }, [id]);

  return (
    <div>
      {result.data}
      <input onChange={(e) => setID(e.target.value)} />
    </div>
  );
};

但是您不能在 useEffect 回调中调用挂钩。我用来自新 API 调用的数据重置 result 的正确方法是什么？

Answer 1

如果部分查询键发生变化，react-query 将自动重新获取。所以你在自定义钩子方面走在了正确的轨道上，并且对于你的App，它也变得更加简单：

const useData = (id: string) => useQuery(
  ['data', id],
  () => axios.get(`/api/data/${id}`),
  {
    enabled: !!id,
  },
);

const Page = () => {
  const [id, setID] = useState('1');
  const result = useData(id);

  return (
    <div>
      {result.data}
      <input onChange={(e) => setID(e.target.value)} />
    </div>
  );
};

就是这样。这就是你所需要的。

如果 id 更改，查询键也会更改，从而为您提供一个新的缓存条目，react-query 将为您获取该条目。

如何重新初始化 React 钩子

How can I reinitialize a React hook

reactjs

react-hooks

react-query