映射对象数组，但需要映射对象响应

Question

我对 React 比较陌生，我正在尝试找出转换在 axios 调用中返回的某些 API 响应的最佳方法。我知道这个问题很可能存在于其他空间，但我似乎无法找到清楚解释我想要做什么的答案。提前感谢任何可以在这方面给我可靠指导或易于理解的文档的人。

我正在构建一个react-table，我需要在其中显示一些数据，但还需要在将数据传递到表之前进行一些数据转换。

注意：我不能编辑服务器，所以我不能在后端进行逻辑调用 这是响应。

  {
  "id": "0e022ed0",
  "start_date": "2014-01-17T06:12:47.566+05:00",
  "request_date": "2014-01-17T05:46:08.542+06:00",
  "end_date": "2014-01-18T02:15:34.721+05:00",
  "status": "The system reports success",
  "total": 56,
  "processed": 56,
  "username": "JimJimmerson",
  "fullname": "Jim Jimmerson",
  "email": "example@gmail.com"
},

我希望我的数据看起来像这样：

 {
    "id": "0e022ed0",
    "start_date": "2014-01-17T06:12:47.566+05:00",
    "request_date": "2014-01-17T05:46:08.542+06:00",
    "end_date": "2014-01-18T02:15:34.721+05:00",
    "progress": {
        "total": 56,
        "processed": 56,
        "status": { 
            "success": "The system reports success",
            "error": "Has start and end date, but not processed",
            "inactive": "No start date",
            "inProgress": "Has start date, processing hasn't finished"
        },
    },
    "user": {
        "username": "JimJimmerson",
        "fullname": "Jim Jimmerson",
        "email": "example@gmail.com"
    }
  }

这是我获取数据的方式： 注意：被传递的options 只是 api-key

const [ data, setData ] = useState([]);
const [ progress, setProgress ] = useState('');
useEffect(() => {
    async function getData() {
        await axios.get(`${API_URL}${1}`, options)
        .then((resp) => {
            const data = resp.data.DATA;
            console.log('Response after call', data);
            setData(data);
            setLoadingData(false);
        })
    }
    if(loadingData) {
        getData();
    }
}, )

我开始研究映射对象数组的值，但我觉得我有些困惑，因为其他人如何处理这个/我对映射值没有扎实的理解。

所以我试着写了这个辅助方法，在数据返回之后

 const transformedTableData = Object.fromEntries(
    Object.entries(data).map(([progress, processed, total]) => [
        progress,
        { ...data, progress: [processed, total] }
    ]),
)

我相信如果我能得到一个可靠的解释，我就能弄清楚其他部分。 我很可能以所有错误的方式来解决这个问题

我需要这样做的原因是在react-table 我不确定如何合并列值。我想创建一个处理它的组件。我知道您可以将单元格的值作为道具传递给组件，但似乎我只能传递该单元格的值。但不是多个单元格的值

{
    Header: 'total',
    accessor: 'total',
    Cell: ({ cell: {value}}) => <ProgressTracker values={value}/>
},
{
     Header: 'processed',
     accessor: 'processed',
     Cell: ({ cell: {value}})=><ProgressTracker values={value}/>
},

Answer 1

这是Object.entries 的一个简单示例，可能会澄清一些事情：

const data = {
  id: "0e022ed0",
  start_date: "2014-01-17T06:12:47.566+05:00",
  request_date: "2014-01-17T05:46:08.542+06:00",
  end_date: "2014-01-18T02:15:34.721+05:00",
  status: "The system reports success",
  total: 56,
  processed: 56,
  username: "JimJimmerson",
  fullname: "Jim Jimmerson",
  email: "example@gmail.com",
};

Object.entries(data).map(([key, value]) => {
  console.log(key, value);
  // do something with key and value and return
});

这将注销

id 0e022ed0
start_date: "2014-01..."
...

但是，由于您最终想要的是具有不同形状的对象，因此我不建议在此处使用 map。 Map 可让您更改数组中每个元素的外观，因此如果您循环遍历整个元素，则可以修改每个元素的外观。

在这种情况下，我会这样做：

const data = {
  id: "0e022ed0",
  start_date: "2014-01-17T06:12:47.566+05:00",
  request_date: "2014-01-17T05:46:08.542+06:00",
  end_date: "2014-01-18T02:15:34.721+05:00",
  status: "The system reports success",
  total: 56,
  processed: 56,
  username: "JimJimmerson",
  fullname: "Jim Jimmerson",
  email: "example@gmail.com",
};

const { total, processed, username, fullname, email, ...rest } = data;

const result = {
  ...rest,
  progress: {
    total,
    processed,
    status: {
      // whatever
    },
  },
  user: {
    username,
    fullname,
    email,
  },
};