用反应迭代对象数组答案

【问题标题】：Iterating over array of objects with react用反应迭代对象数组
【发布时间】：2018-08-25 04:40:31
【问题描述】：

我有一个需要能够迭代的数据对象，它是一个对象数组。我正在尝试使用Object.keys 这样做，但在我的实现中缺少一些东西，因为我收到错误TypeError: Cannot read property 'metrics' of undefined。

数据对象是这样构造的：

export const data = {
  metrics:
  [
    {
      number:'10',
      subText: 'content',
      tertiary: 'more content'
    },
    {...}
  ]
}

组件尝试迭代对象的位置，如下所示：

 export const Metrics = (props) => {
  return (
      <div className="metric-container" aria-labelledby="metrics">
        {Object.keys(props.data.metrics).map((metric, i) => (
          <div className="metric"><h1>{metric.number}</h1><p>{metric.subText}</p><p>{metric.tertiary}</p></div>
        ))}
      </div>
    )
};

数据通过

导入App.js

import { data } from './assets/dataprops';

具有组件<Metrics {...data}/>

【问题讨论】：

标签： reactjs object

【解决方案1】：

应该是：

<Metrics data={...data}/>

否则，如果你想通过

<Metrics {...data}/>

您可以访问诸如

之类的指标

 export const Metrics = (props) => {
  return (
      <div className="metric-container" aria-labelledby="metrics">
        {Object.keys(props.metrics).map((metric, i) => (
          <div className="metric"><h1>{metric.number}</h1><p>{metric.subText}</p><p>{metric.tertiary}</p></div>
        ))}
  </div>
)

};

【讨论】：

我选择了第二个选项，并从 props.data.metrics 中删除了数据，因此它只是 props.metrics，但现在 DOM 中没有显示任何数据。
@Matt 可能是因为您的<div className="metric"> 中没有密钥？

【解决方案2】：

<Metrics {...data}/>

这会将data 中的每个键作为道具传递给Metrics。您可以进行以下两种更改之一：

访问props.metrics 而不是props.data.metrics。
将data 作为道具传递：
```
<Metrics data={data}>
```

我建议你为你的浏览器安装 React Developer 插件。这会在开发人员工具窗口中添加一个“React”选项卡。在此选项卡上，您可以检查组件及其道具和状态。使用此工具可帮助您跟踪您在此处遇到的问题。您会立即看到 Metrics 组件没有名为 data 的道具，但它确实有一个名为 metrics 的道具。

请注意，由于metrics 是一个数组，因此您无需调用Object.keys()。你可以直接做props.metrics.map()。

【讨论】：

直接使用props.metrics.map() 是解决方案。谢谢！