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

Question

Hi I'm trying to fetch data using personally built axios function named fetchMerchant .

I give dependencies in useEffect hook with fullData but it seems infinite looping after render and re render.

In my opinion, It should be rendered once after useEffect hooks because of dependency fullData given as a array.

How can I prevent infinite rendering after 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

It's running infinitely because of how your hook is setup. When you place something in the brackets at the end of the hook [fullData] it means that the hook will fire when that value changes. You don't want that to happen in this case because fetchData() inside of the hook will cause fullData to change thus firing the hook again. If you leave the brackets empty like so it should only fire once when the component is mounted

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

    fetchData();
  },[])