Question

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

我用fullData在useEffect挂钩中提供了依赖项，但是在渲染和重新渲染之后似乎无限循环。

我认为，由于依赖项fullData作为数组给出，因此应在useEffect钩子之后呈现一次。

在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} /> 
    </> 
  )
};

Answer 1

由于设置了挂钩，它无限运行。在挂钩[fullData]末尾的括号中放置某些内容时，表示该值更改时挂钩将触发。您不希望在这种情况下发生这种情况，因为钩子内部的fetchData()将导致fullData发生变化，从而再次触发钩子。如果像这样将支架留空，那么仅在安装组件后才发射一次

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

    fetchData();
  },[])

在react.js中使用useEffect无限获取数据

1 个答案: