尝试使用 .map 对数组对象进行排序答案

【问题标题】：Trying to sort through array object using .map尝试使用 .map 对数组对象进行排序
【发布时间】：2019-09-05 22:44:50
【问题描述】：

我有以下代码，我试图循环遍历对象数组，但由于某种原因，它告诉我 data.map 不是一个函数，即使我知道数据中有内容。

function Tree({ data }) {
  let count = 0;
  return (
    <>
      {data.map(item => {
        count += 1;
        console.log("Item", item.name);
        return (
          <div key={count} className="node">
            {/* {item.name} */}
          </div>
        );
      })}
    </>
  );
}
export default Tree;

当我将其更改为 Object.entries 时，我得到了一些东西，但我过去不是这样做的，所以我对这里的问题有点困惑。

function Tree({ data }) {
  let count = 0;
  return (
    <>
      {Object.entries(data).map(item => {
        count += 1;
        console.log("Item", item.name);
        return (
          <div key={count} className="node">
            {/* {item.name} */}
          </div>
        );
      })}
    </>
  );
}
export default Tree;

数组对象的构造如下：

[
  {
    id: 0,
    name: Brannon,
  },
  {
    id: 1,
    name: John,
  }
]

【问题讨论】：

console.log/debug the data before you map 并准备好惊讶data实际上不是一个数组，而是一个对象。
即使它包含在 [ ] 中？
你确定data（总是）是一个数组吗？此外，从Object.entries 生成的item 永远不会有.name。
是的，因为我以与上述相同的格式创建它。
我现在更新了上面的代码，以更好地反映我所拥有的。

标签： javascript reactjs ecmascript-5

【解决方案1】：

Console log data。当您尝试映射的数据不是数组时，您将收到此消息。当您运行 Object 条目时，您正在将对象转换为由其键和值组成的数组。所以这意味着原始数据只是一个普通的对象，而不是一个数组。

如果您将索引作为第二个参数传递，而不是像您一样手动处理它，map 也会自动为您处理索引。

{Object.entries(data).map( (item, count) => {
    //count += 1; remove this it will auto increment
    console.log("Item", item.name);
    return (
      <div key={count} className="node">
        {/* {item.name} */}
      </div>
    );
})}

【讨论】：

@zfrisch 不能用于什么？在这种情况下，OP 仅将其用作映射键，因此它绝对可以工作

【解决方案2】：

如果没有帮助，请尝试写入数据的 console.log 输出

function Tree({ data }) {
    console.log("data", JSON.stringify(data));
      return (
        <>
          { data && data.map((item, index) => {
            console.log("Item", item.name);
            return (
              <div key={index} className="node">
                {/* {item.name} */}
              </div>
            );
          })}
        </>
      );
    }
    export default Tree;

【讨论】：