如何将对象值数组映射到 ReactJS 中的键值数组？答案

【问题标题】：How to map array of objects values to key-value array in ReactJS?如何将对象值数组映射到 ReactJS 中的键值数组？
【发布时间】：2019-09-25 18:48:28
【问题描述】：

我正在尝试将我从 axios 获得的 json 数据用于我的 react 应用程序中的 echarts，但我不知道如何正确映射它。

我当前的代码从对象数组转换

[
    {
        "data": "24.64",
        "timestamp": "2019-04-30T02:00:42.032Z"
    },
    {
        "data": "24.13",
        "timestamp": "2019-04-30T02:20:36.966Z"
    }
]

到2个状态

data: ["24.64","24.13"]
timestamp: ["2019-04-30T02:00:42.032Z","2019-04-30T02:20:36.966Z"]

我稍后会在哪里打电话给他们

this.state.data
and
this.state.timestamp

但这并没有给我想要的确切图表。

这是我当前获取和转换对象数组的工作代码的一部分：

componentDidMount() {
    this.getData(); 
};

getData() {      
    axios.get('/api/records/datatime')
    .then((res) => {  
      this.setState({ 
        data: res.data.map(({ data }) => data),
        timestamp: res.data.map(({ timestamp }) => timestamp),
      });
     })   
    .catch((err) => { console.log(err); });
}

我现在需要的是在我的状态下将对象数组更改为像这样的数组数组，以时间戳为键，以数据为值。

chartData: 
  [
    ["2019-04-30T02:00:42.032Z","24.64"],
    ["2019-04-30T02:20:36.966Z","24.13"]
  ]

【问题讨论】：

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

您可以使用Object.values()

this.setState({ 
  chartData:res.data.map(Object.values)
});

简单的 js 中的工作 sn-p

const arr= [ { "data": "24.64", "timestamp": "2019-04-30T02:00:42.032Z" }, { "data": "24.13", "timestamp": "2019-04-30T02:20:36.966Z" } ]
const res = arr.map(Object.values)
console.log(res)

【讨论】：

【解决方案2】：

使用map 和Object.values，然后使用reduce 来制作对象：

const data = [{"data":"24.64","timestamp":"2019-04-30T02:00:42.032Z"},{"data":"24.13","timestamp":"2019-04-30T02:20:36.966Z"}];
const res = data.map(Object.values).reduce((acc, [d, t]) => {
  acc.data.push(d);
  acc.timestamp.push(t);
  return acc;
}, { data: [], timestamp: [] });
console.log(res)

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：