如何重新初始化 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 会为你获取。