首页 > 解决方案 > 在reactjs中映射项目并展平为单个数组

问题描述

目前我有一个 reactjs 函数,它简单地查询一个 pouchDB 文档,获取 7 条记录,然后我试图展平这些记录以便存储在状态中。问题是,现在当我 console.logdocCalories我得到这个:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0: {caloriesBurned: "5345", createdAt: "2020-03-28T05:15:24.369Z"}
  1: {caloriesBurned: "1234", createdAt: "2020-03-28T10:39:16.901Z"} 
  2: {caloriesBurned: "1122", createdAt: "2020-03-28T10:32:03.100Z"}
  3: {caloriesBurned: "1234", createdAt: "2020-03-28T05:16:54.846Z"}
  4: {caloriesBurned: "1234", createdAt: "2020-03-28T10:21:31.092Z"}
  5: {caloriesBurned: "1234", createdAt: "2020-03-28T05:08:00.791Z"}
  6: {caloriesBurned: "1234", createdAt: "2020-03-28T05:07:35.940Z"}
  length: 7__proto__: Array(0)

但我想得到这样的东西:

map: [5345,1234,1122,1234,1234,1234,1234]

所以基本上一个对象包含每个文档的卡路里燃烧值中的 7 个数字

我在这里做错了什么,如何正确地将它们放入一个数组/对象中?

      setMax = () => {
    this.state.caloriesDB.db.find({
      selector: {
        $and: [
          {_id: {"$gte": null}},
          {caloriesBurned: {$exists: true}},
          {createdAt: {$exists: true}}
        ]
      },
      fields: ['caloriesBurned', 'createdAt'],
      sort: [{'_id':'desc'}],
      limit: 7
    }).then(result => {

      const newDocs = result.docs;
      const docCalories = newDocs.map((caloriesBurned) => caloriesBurned)

      console.log('this is map');
      console.log(docCalories);

    }).catch((err) =>{
      console.log(err);
    });
  }

标签: javascriptreactjs

解决方案


您在 map 函数中返回整个对象,而您应该只发送caloriesBurned属性。

const docCalories = newDocs.map((data) => data.caloriesBurned)

或者,如果您愿意,我们可以解构数据并拥有

const docCalories = newDocs.map(({caloriesBurned}) => caloriesBurned)

推荐阅读