1

我正在开发一个使用 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 限制了渲染的数量以防止无限循环。

我的代码有什么问题？

4

1 回答 1

7

此处出现该错误的主要原因是，一旦您拥有as if，您就在无限循环中的语句中运行该代码块。然后在每个渲染中调用触发另一个渲染。info.status === 'success'trueupdateList

可能我会useEffect在这里使用钩子来监听更改info：

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

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

建议阅读使用效果挂钩。

于 2020-09-30T13:44:29.513 回答