Question

我有一个数据对象，我需要对其进行迭代才能访问对象数组。我尝试使用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}/>

的

Answer 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>
)

};

Answer 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()。

使用react遍历对象数组

2 个答案: