React Query with hooks is throwing error, "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

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 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

我的代码有什么问题？

Answer 1

这里出现该错误的主要原因是，一旦您将 info.status === 'success' 设为 true，您就是 if 语句中的代码块运行无限循环。然后在每个渲染中调用updateList触发另一个渲染。

可能我会在这里使用 useEffect 钩子来监听 info 的变化：

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

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

建议阅读 Using the Effect Hook。

React Query with hooks is throwing error, "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

React Query with hooks is throwing error, "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

javascript

reactjs

react-hooks

react-query