带有钩子的 React Query 抛出错误，“未捕获的错误：重新渲染太多。React 限制渲染次数以防止无限循环。”

Question

我正在开发一个使用 React 查询、https ://react-query.tanstack.com/、React 钩子和功能组件的 React JS 项目。但是当我对 API 调用使用反应查询时它会抛出错误。

这是我的组件以及我如何在其中使用查询。

const App = () => {
   const [ list, updateList ] = useState([])
   const info = useQuery(["item-list"], getList, {
    retry: false,
    refetchOnWindowFocus: false,
  })

  if (info.status == "success") {
     updateList(info.data)
  }
    return (
       //view components here
    )
}

这是我的 getList API 调用逻辑

export const getList= async () => {
  const { data } = await api.get("8143487a-3f2a-43ba-b9d4-63004c4e43ea");
  return data;
}

当我运行我的代码时，我收到以下错误：

react-dom.development.js:14815 未捕获的错误：重新渲染太多。React 限制渲染次数以防止无限循环。

我的代码有什么问题？

Answer 1

此处出现该错误的主要原因是，if一旦您将info.status === 'success'as true. 然后，在每一个渲染的updateList被称为另一个渲染的触发器。

可能我会useEffect在这里使用hook 来监听以下位置的更改info：

useEffect(() => {
  if (info.status == "success") {
     updateList(info.data)
  }
}, [info])

您应该if从<App />组件主体中删除该语句，并useEffect按照上面的建议使用钩子。通过这样做，该if语句将在info更改时检查一次，而不是在每次渲染时检查。

建议阅读的是Using the Effect Hook。