第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何從自定義反應(yīng)鉤子豐富數(shù)據(jù)

如何從自定義反應(yīng)鉤子豐富數(shù)據(jù)

心有法竹 2023-07-06 14:42:08
在我的 React 應(yīng)用程序中，我創(chuàng)建了一個(gè)自定義鉤子，它在使用時(shí)返回一組數(shù)據(jù)。它的用法就像const projects = useProjects();它是一個(gè)對象數(shù)組，我們可以假設(shè)它看起來像這樣： [{project_id : 123 , name : 'p1'} , {project_id : 1234 , name : 'p2'} ]現(xiàn)在我需要使用 API 中的數(shù)據(jù)來豐富這些數(shù)據(jù)。所以我必須遍歷項(xiàng)目并基本上為每個(gè)對象添加一個(gè)新字段，因此新的對象數(shù)組將如下所示：[{project_id : 123 , name : 'p1' field3: 'api data'} , {project_id : 1234 , name : 'p2' , field3: 'api data1' } ]我怎樣才能做到這一點(diǎn)？我所做的是循環(huán)訪問項(xiàng)目數(shù)據(jù)并直接在循環(huán)內(nèi)添加字段。但我不知道我是否應(yīng)該像這樣改變這些數(shù)據(jù)？我希望看看這是否是好的做法。
查看完整描述

1 回答

?
萬千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

有幾種方法可以解決這個(gè)問題 - 這完全取決于您如何從 API 獲取數(shù)據(jù)。如果你想將其注入到鉤子中，你可以這樣做 -


const DEFAULT_PROJECTS = [

    { project_id : 123, name: 'p1' }, 

    { project_id : 1234, name: 'p2' },

];


const useProjects = (dataFromApi) => {

    // Assuming that dataFromApi is what you got back from your API call, 

    // and it's a dictionary keyed on the project_id.

    return useMemo(() => {

        return DEFAULT_PROJECTS.map(proj => {

            const extraData = dataFromApi.get(proj.project_id) || {};

            

            return {

                ...proj,

                ...extraData,

            };

        });

    }, [dataFromApi]);

};

如果總是在變化，那么這里useMemo并不是很有幫助dataFromApi- 它每次都會(huì)重建返回的對象。


如果你想獲取數(shù)據(jù)作為你的鉤子的一部分，你可以這樣做 -


import { useEffect, useMemo, useState } from 'react';


const DEFAULT_PROJECTS = [

  { project_id : 123, name: 'p1' },

  { project_id : 1234, name: 'p2' },

];


const useProjects = () => {

  const [dataFromApi, setDataFromApi] = useState(null);


  useEffect(() => {

    if (!!dataFromApi) return;


    // Simulate the data fetch

    const fetchData = async () => {

      return new Promise(resolve => {

        setTimeout(() => {

          const map = new Map();

          map.set(123, { 

            field3: 'api data',

            field4: 'other data',

          });


          setDataFromApi(map);

        }, 2000);

      });

    };


    fetchData();

  }, [dataFromApi]);


  return useMemo(() => {

    let extraData = dataFromApi || new Map();


    return DEFAULT_PROJECTS.map(proj => {

      const extraFields = extraData.get(proj.project_id) || {};


      return {

          ...proj,

          ...extraFields,

      };

    });

  }, [dataFromApi]);

}


export default useProjects;

這是一個(gè)代碼沙箱，顯示了它的實(shí)際效果。


查看完整回答
反對 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)