React中如何根据键过滤对象数据并使用useState生成新数组？

实现方案 #

你可以通过Object.values()结合数组map方法完成字段提取，写法比for...of更简洁，符合React函数式编码习惯，性能没有明显差异。

注意你给出的目标结构[amount: 500, date: '2021-12-07']属于语法笔误，JS数组不支持命名键，实际应为对象数组，以下代码按标准对象数组实现，如果你确实需要特殊结构可自行调整返回值。

完整代码示例：

import { useState, useEffect } from 'react'

// 你的原始源数据
const originData = {
  0: {
    buyAmount: 16.664328043964396,
    buyAmountInUsd: 16.685266204095775,
    date: {date: '2021-12-07'},
    sellAmount: {USD: 500, INR: 35000}
  },
  1: {
    buyAmount: 1004.7015442959262,
    buyAmountInUsd: 1005.9639175379324,
    date: {date: '2021-12-07'},
    sellAmount: {USD: 1000, INR: 79000}
  }
}

function YourComponent() {
  // 初始化state存储处理后的结果数组
  const [processedList, setProcessedList] = useState([])

  useEffect(() => {
    // 核心处理逻辑
    const result = Object.values(originData).map(item => ({
      amount: item.sellAmount.USD,
      date: item.date.date
    }))
    setProcessedList(result)
  }, [])

  // 后续直接使用processedList即可
  return <div>{/* 你的业务渲染逻辑 */}</div>
}

如果偏好for...of写法，也可以用如下方式实现，效果完全一致：

const result = []
for (const item of Object.values(originData)) {
  result.push({
    amount: item.sellAmount.USD,
    date: item.date.date
  })
}
setProcessedList(result)

内容的提问来源于stack exchange，提问作者Mohit Chandel