如何將對象數組值映射到ReactJS中的鍵值數組？

Question

我正在嘗試使用我在我的反應應用程序中從axios獲取echarts的json數據，但我不知道如何正確映射它。

我當前的代碼從一組對象轉換而來

[
    {
        "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"]
  ]

Answer 1

你可以使用Object.values()

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

一個簡單的js工作片段

 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) 

Answer 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; }