如何从自定义反应钩子丰富数据

Question

在我的 React 应用程序中，我创建了一个自定义钩子，它在使用时返回一组数据。它的用法就像const projects = useProjects();它是一个对象数组，我们可以假设它看起来像这样： [{project_id : 123 , name : 'p1'} , {project_id : 1234 , name : 'p2'} ]现在我需要使用 API 中的数据来丰富这些数据。所以我必须遍历项目并基本上为每个对象添加一个新字段，因此新的对象数组将如下所示：[{project_id : 123 , name : 'p1' field3: 'api data'} , {project_id : 1234 , name : 'p2' , field3: 'api data1' } ]我怎样才能做到这一点？我所做的是循环访问项目数据并直接在循环内添加字段。但我不知道我是否应该像这样改变这些数据？我希望看看这是否是好的做法。

Answer 1

有几种方法可以解决这个问题 - 这完全取决于您如何从 API 获取数据。如果你想将其注入到钩子中，你可以这样做 -

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- 它每次都会重建返回的对象。

如果你想获取数据作为你的钩子的一部分，你可以这样做 -

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;

这是一个代码沙箱，显示了它的实际效果。