在对象上传播不可迭代实例的无效尝试

Question

 data: [],

 ... 

我将 API 调用中的数据加载到data数组中。然后我尝试使用下面的方法将数据数组排列成一个由键、值对（值可以是数组本身）组成的映射。

    const dataMap = {};
    for (let i = 0; i < data.length; i+=1) {
      const key = data[i].product.name;
      const value = data[i];

      if (key in dataMap) {
        dataMap[key].push(value);
      } else {
        dataMap[key] = [value];
      }
    }

但是当我执行以下操作时，出现以下错误。我做错了什么？

{[...dataMap].map(([key, value]) => {}

传播不可迭代实例的无效尝试

这是我的数据图

DataMap 计算正确，但是当我使用以下代码进行迭代时

Object.entries(dataMap).map((key, value) => {
          console.log(key);
          console.log(value)
 })

它打印出以下内容。值是一些我不明白为什么的索引？值应该是一个数组。我的dataMap是一个key，value（值是一个数组）

Answer 1

你的问题与react/react-native无关，它是简单的javascript：

dataMap已经是一个对象，所以你只能传播它的条目。

// An empty object assign.
const dataMap = {};

// Shallow copy
const objShallowCopy = {...dataMap};

另外，您可以使用以下方法重写 for 循环reduce()：

// An empty object assign.
const dataMap = {};

// Shallow copy
const objShallowCopy = {...dataMap};

此外，Object.entries返回一个条目数组，因此您需要修复日志记录：

const dataSource = [
  { product: { name: 1 }, value: 10 },
  { product: { name: 1 }, value: 100 },
  { product: { name: 2 }, value: 30 },
  { product: { name: 2 }, value: 20 }
];

const dataMap = dataSource.reduce((acc, curr) => {
  const prodArr = acc[curr.product.name];
  return { ...acc, [curr.product.name]: prodArr ? [...prodArr, curr] : [curr] };
}, {});

console.log(dataMap);