react.js中useEffect中的无限获取数据答案

【问题标题】：infinite fetch data in useEffect in react.jsreact.js中useEffect中的无限获取数据
【发布时间】：2020-06-05 01:42:56
【问题描述】：

您好，我正在尝试使用名为 fetchMerchant 的个人构建的 axios 函数来获取数据。

我在 useEffect 钩子中使用 fullData 提供依赖关系，但在渲染和重新渲染之后似乎无限循环。

在我看来，它应该在 useEffect 钩子之后渲染一次，因为依赖 fullData 以数组形式给出。

在 useEffect 之后如何防止无限渲染？


  const BoardPage: FC =() => {
  const [fullData, setData] = useState<ContentType>({} as ContentType);
  const fetchData = async() => {
    try{
      const [,response] = await fetchMerchant();
      console.log(response);
      setData(response);
    } catch(error){
      console.log(error);
    }
  }
  useEffect(() => {
    console.log("board rendered");

    fetchData();
  },[fullData]) 
  return(
    <>
      <Board data={fullData} /> 
    </> 
  )
};

【问题讨论】：

这能回答你的问题吗？ Add state and lifecycle methods to Function Components

标签： reactjs react-hooks

【解决方案1】：

由于挂钩的设置方式，它会无限运行。当您在钩子[fullData] 末尾的括号中放置一些东西时，这意味着当该值更改时钩子将触发。您不希望在这种情况下发生这种情况，因为钩子内部的fetchData() 会导致fullData 发生变化，从而再次触发钩子。如果您将括号留空，那么它应该只在安装组件时触发一次

  useEffect(() => {
    console.log("board rendered");

    fetchData();
  },[])

【讨论】：