.map() 函数返回数组数组而不是对象数组

Question

有人知道为什么这个 filterData map 函数是

return使用数组数组而不是对象数组？

我在另一个 map() 中使用 map() 函数，所以基本上我试图在大数组上迭代第一个 map 函数，然后运行它在子数组中迭代。

我只想return一个简单的对象，只包含我在第二个地图对象中select的数据。

function apiCall() {
    const promises = urls.map((url) => axios.get(url, { headers }));

    Promise.all(promises).then((responses) => {
      let data = [];
      let filterData;
      responses.forEach((response) => {
        data = data.concat(response.data);

        filterData = data.map((nested0) => 
          nested0.childNested.map((nested1) => {
            return {
              id: nested0.id,
              name: nested0.serve,
              date: nested1.name
            };
          })
        )
      });
    });
  }

这是我要迭代的json结构，map不能运行从对象进入第二个数组。

[
    {
        "Id": "tryuk34io98i",
        "src": "planet",
        "gwt": {
            "gwtId": 918,
            "name": "Request"
        },
        "serve": "Transit1",
        "childNested": [
            {
                "name": "xxl",
                "version": "001",
                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "solved": {
                    "id": "tik",
                    "name": "face",
                    "isOn": "false"
                },
                "externalRef": [
                    {
                        "type": "eight",
                        "uri": "git"
                    },
                    {
                        "type": "two",
                        "uri": "git"
                    }
                ],
                "project": {
                    "name": "InProgress",
                    "version": "1",                    
                    "active": true
                },
                "used": 0,
                "internal": false
            }
        ],
        "affe": 0
    },
    {
        "Id": "987ytrdfghv",
        "src": "Space",
        "gwt": {
            "gwt": 918,
            "name": "Request"
        },
        "serve": "Transit",
        "childNested": [
            {
                "name": "xxs",
                "version": "02",
                "description": "Nullam sed lorem nec sem lobortis porta. Morbi vitae lorem velit.",
                "solved": {
                    "id": "tok",
                    "name": "back face",
                    "isOn": true
                },
                "externalRef": [
                    {
                        "type": "one",
                        "uri": "http"
                    },
                    {
                        "type": "two",
                        "uri": "http"
                    }
                ],
                "project": {
                    "name": "Fail",
                    "version": "1.1",
                    "active": false
                },
                "used": 0,
                "internal": false
            }
        ],
        "affe": 0
    }
]

Answer 1

因为您使用的是嵌套地图函数，所以第一个地图 return 是第二个地图。两个地图都将 return 一个数组。

Answer 2

使用 flatMap、map 和 destructuring 的组合可以简化如下所示的内容。（PS。刚刚解释了你案例中的数据，如果你还有问题，请更新你的数据模型）

const responses = [
  {
    data: {
      id: "123",
      capacity: 20,
      childNested: [{ date: { name: "foo1" } }, { date: { name: "foo2" } }],
    },
  },
  {
    data: {
      id: "456",
      capacity: 40,
      childNested: [{ date: { name: "bar" } }],
    },
  },
];

const output = responses.flatMap(({ data }) =>
  data.childNested.map(({ date: { name } }) => ({
    id: data.id,
    name: data.capacity,
    date: name,
  }))
);

console.log(output)

Answer 3

该解决方案可能是实现以下描述的输出结构/格式的一种可能解决方案：

  id: nested0.id,         // outer-array "Id" prop
  name: nested0.serve,    // outer-array "serve" prop
  date: nested1.name      // inner-array "name" prop

代码段

// method to obtain the array of transformed objects
const transformData = arr => (
  arr.flatMap(        // iterate the outer-array using "flatMap()"
    ({ Id, serve, childNested }) => (   // de-structure to directly access props
      childNested.map(          // iterate over inner-array "childNested"
        ({ name }) => ({        // de-structure to directly access "name" prop
          id: Id,               // structure the desired output object
          name: serve,
          date: name
        })
      )
    )
  )             // implicit "return" will send the result of "flatMap()"
);

const rawData = [{
    "Id": "tryuk34io98i",
    "src": "planet",
    "gwt": {
      "gwtId": 918,
      "name": "Request"
    },
    "serve": "Transit1",
    "childNested": [{
      "name": "xxl",
      "version": "001",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "solved": {
        "id": "tik",
        "name": "face",
        "isOn": "false"
      },
      "externalRef": [{
          "type": "eight",
          "uri": "git"
        },
        {
          "type": "two",
          "uri": "git"
        }
      ],
      "project": {
        "name": "InProgress",
        "version": "1",
        "active": true
      },
      "used": 0,
      "internal": false
    }],
    "affe": 0
  },
  {
    "Id": "987ytrdfghv",
    "src": "Space",
    "gwt": {
      "gwt": 918,
      "name": "Request"
    },
    "serve": "Transit",
    "childNested": [{
      "name": "xxs",
      "version": "02",
      "description": "Nullam sed lorem nec sem lobortis porta. Morbi vitae lorem velit.",
      "solved": {
        "id": "tok",
        "name": "back face",
        "isOn": true
      },
      "externalRef": [{
          "type": "one",
          "uri": "http"
        },
        {
          "type": "two",
          "uri": "http"
        }
      ],
      "project": {
        "name": "Fail",
        "version": "1.1",
        "active": false
      },
      "used": 0,
      "internal": false
    }],
    "affe": 0
  }
];

console.log(transformData(rawData));

说明

添加了代码段中的内联评论。

.map() 函数返回数组数组而不是对象数组

.map() function is returning an array of arrays instead of array of objects

javascript

arrays

reactjs

ecmascript-6

axios