在 React 中从 API 访问数据时重新呈现太多

Question

我正在向链接到我的数据库的 API 发出获取请求。dataApi 是一个非常大的对象，其中嵌套了很多对象和数组。数据库中的某些条目没有我需要的完整详细信息，因此我过滤它们以仅显示长度大于 5 的条目。现在的问题是，当我尝试获取每个条目的名称时，这些条目被拆分为Tag1, Tag2 or Tag3.在此之前，当我访问所有条目并获取其中的项目时，没有问题。但是，当我尝试按名称过滤它们并将与该名称对应的对象存储在其状态时，就会出现此问题。编辑： 当我console.log(arr1)显示所有数据时，但当我将状态设置为它时，它会导致错误。// Data from all entries in databaseconst [dataApi, setDataApi] = useState();// Data for each of the tagsconst [tag1, setTag1] = useState();const [tag2, setTag2] = useState();const [tag3, setTag3] = useState();useEffect(() => {  axios.get(URL).then((res) => {    const data = res.data;    setDataApi(data);  });}, []);const getTagDetails = data => {    const arr1 = [];    const arr2 = [];    const arr3 = [];    data &&        data.forEach(d => {            // Entries into the database which do not have any tag information            // have a size of 5 and those with all the details have a size of 6            const sizeOfObject = Object.keys(d).length;            // Only need database items with all the details            if (sizeOfObject > 5) {                const name = d["tags"]["L"][0]["M"]["name"]["S"];                // Split the data for the tags into their respective name                // Will be used to set individual datasets for each tag                if (name === "Tag1") {                    arr1.push(d);                }                if (name === "Tag2") {                    arr2.push(d);                }                if (name === "Tag3") {                    arr3.push(d);                }            }        });    setTag1(arr1);    setTag2(arr2);    setTag3(arr3);};getTagDetails(dataApi);

Answer 1

我想问题是你在文件内部调用getTagDetails(dataApi)所以它导致了这个无限渲染问题

而是删除 getTagDetails 并尝试在 API 解析后调用此函数。

useEffect(() => {

  axios.get(URL).then((res) => {

    const data = res.data;

    getTagDetails(data)

  });

}, []);

Answer 2

我认为您的问题是您构建功能的方式getTagDetails。每次渲染时，您都会调用getTagDetails()，您做的第一件事就是为每个标签创建一个新数组。当您使用setTag新数组调用时，它将重新呈现。您可能希望将getTagDetails逻辑移动到效果中，以便它只在挂载时运行一次（或者如果您需要更新新数据，则向依赖项数组添加依赖项）