Перебор массива объектов с реагированием

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.Вы можете сделать одно из двух изменений:

1. Доступ props.metrics вместо props.data.metrics.

2. Пропуск data в качестве реквизита:

   <Metrics data={data}>
   

Я предлагаю вам установить плагин React Developer для вашего браузера.Это добавляет вкладку «Реагировать» в окно инструментов разработчика.На этой вкладке вы можете проверить компоненты и их реквизиты и состояние.Использование этого инструмента поможет вам отследить проблемы, подобные той, с которой вы столкнулись здесь.Вы сразу увидите, что в компоненте Metrics нет реквизита с именем data, но у него есть реквизит с именем metrics.

Обратите внимание, что поскольку metrics является массивом, вам не нужноЗвоните Object.keys().Вы можете просто сделать props.metrics.map() напрямую.

Answer 2

Должно быть:

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

};