亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中從 API 訪問數據時重新呈現太多

在 React 中從 API 訪問數據時重新呈現太多

POPMUISE 2023-05-25 17:18:44
我正在向鏈接到我的數據庫的 API 發出獲取請求。dataApi 是一個非常大的對象,其中嵌套了很多對象和數組。數據庫中的某些條目沒有我需要的完整詳細信息,因此我過濾它們以僅顯示長度大于 5 的條目?,F在的問題是,當我嘗試獲取每個條目的名稱時,這些條目被拆分為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);
查看完整描述

2 回答

?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

我想問題是你在文件內部調用getTagDetails(dataApi)所以它導致了這個無限渲染問題


而是刪除 getTagDetails 并嘗試在 API 解析后調用此函數。


useEffect(() => {

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

    const data = res.data;

    getTagDetails(data)

  });

}, []);


查看完整回答
反對 回復 2023-05-25
?
森林海

TA貢獻2011條經驗 獲得超2個贊

我認為您的問題是您構建功能的方式getTagDetails。每次渲染時,您都會調用getTagDetails(),您做的第一件事就是為每個標簽創建一個新數組。當您使用setTag新數組調用時,它將重新呈現。您可能希望將getTagDetails邏輯移動到效果中,以便它只在掛載時運行一次(或者如果您需要更新新數據,則向依賴項數組添加依賴項)



查看完整回答
反對 回復 2023-05-25
  • 2 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號