如何重新初始化 React 钩子

Posted 2023-02-19

【中文标题】如何重新初始化 React 钩子

【英文标题】：How can I reinitialize a React hook

【发布时间】：2022-01-20 14:04:36

【问题描述】：

我有一个页面，我根据 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 的正确方法是什么？

【问题讨论】：

你为什么要把useData作为useState的初始值？似乎useState 是不必要的并导致问题

【参考方案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 Query。