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

Question

我正在向链接到我的数据库的 API 发出获取请求。

dataApi 是一个非常大的对象，其中嵌套了很多对象和数组。

数据库中的某些条目没有我需要的完整详细信息，因此我过滤它们以仅显示长度大于 5 的条目。

现在的问题是，当我尝试获取每个条目的名称时，这些条目被拆分为Tag1, Tag2 or Tag3.

在此之前，当我访问所有条目并获取其中的项目时，没有问题。

但是，当我尝试按名称过滤它们并将与该名称对应的对象存储在其状态时，就会出现此问题。

编辑： 当我console.log(arr1)显示所有数据时，但当我将状态设置为它时，它会导致错误。

// Data from all entries in database

const [dataApi, setDataApi] = useState();

// Data for each of the tags

const [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逻辑移动到效果中，以便它只在挂载时运行一次（或者如果您需要更新新数据，则向依赖项数组添加依赖项）