开发者问题收集

未捕获的 RangeError：React hooks 获取中超出最大调用堆栈大小

2021-05-07
914
reactjs react-hooks fetch

大家好，感谢阅读本文。 我正在尝试访问一个 API，但它返回了一个大数据（包含 6000 个元素的数组），因此我必须等待几秒钟才能呈现页面。此外，我还遇到了最大回调的范围错误。 我是否遗漏了某些内容或 API 有问题？有什么可能的解决方法吗？这是我的代码： 

import React, { useState, useEffect } from "react";

export default function SomeName() {
  const [archive, setArchive] = useState([]);
  const getArchive = async () => {
    const response = await fetch("https://anaddress");
    const body = JSON.parse(await response.text());
    setArchive(body.splice(4))
  };

  useEffect(() => {
    getArchive();
  }, []);

return ( <div> Some JSX to render archive </div>)
};

谢谢

2个回答

这主要是因为无限递归而发生的，您使用的效果钩子递归地调用 getArchive，您需要确保当您的存档数组为空时它只被调用一次。您可以在调用 fetch 之前通过检查存档数组长度来存档它，如下所示 

import React, { useState, useEffect } from "react";

export default function SomeName() {
const [archive, setArchive] = useState([]);
const getArchive = async () => {
  
const response = await fetch("https://anaddress");
const body = JSON.parse(await response.text());
setArchive(body.splice(4));
};

useEffect(() => {
   if(archive.length ==0){
        getArchive();
      }
     
}, []);

 return ( <div> Some JSX to render archive </div>)
};
Jatin Parmar
2021-05-07

我能够通过将： 

setArchive(body.splice(4));

替换为： 

body.splice(4);
setArchive(body);

来解决这个问题。我还注意到我不需要在 useEffect 中输入“[]”。

A Zarqam
2021-05-07