ReactJS: визуализация объекта с ключами с картой

Question

Я новичок в Reactionjs / ES6 и пытаюсь отобразить объект, который выглядит следующим образом, в console.log():

Object
0: {_id: "5ceea2eb0023ee3bcc730cc7", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "SUP", name: "Superior", …}
1: {_id: "5ceebf7ea686a03bccfa67bf", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "ULT", name: "Ultimate", …}
2: {_id: "5ceec48fa686a03bccfa67c4", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "PRO", name: "Professional", …}

Я пытался сделать это с map(), а такжес другими методами, но я не могу заставить его работать.Вот что я попробовал:

return(
         Object.keys(prods).map((key, i) => (prods[key].map((product, ind) =>
              <div key={ind}>
               <h3>{product.name}</h3>
             </div>
            )
        ))
    )

Буду признателен за любые предложения о том, как получить доступ к этим данным, чтобы я мог преобразовать их в div или что-то в этом роде.

РЕДАКТИРОВАТЬ:

Вот как я заставил это работать и измениться после того, как меня направили в правильном направлении.Спасибо всем!

let prodlist = Object.values(prods).map((product, ind) => (
  <Container>
    <h3>{product.name}</h3>
  </Container>
 ));

return(    
   {prodlist}
)

Спасибо

Answer 1

Вы можете обновить логику компонентов render(), чтобы использовать Object.values(), чтобы извлечь значения входного объекта prods.Затем вам нужно map() каждый элемент массива в шаблон JSX, например:

return <React.Fragment> 
{ 
    Object.values(prods).map((product) => (<div key={product._id}>
        <h3>{product.name}</h3>
    </div>))
}
</React.Fragment>

Дополнительное примечание, относящееся к key опоре - лучше всего указать key значения, которые идентифицируют item в отображаемом списке (вместо текущего индекса item в списке).Предполагая, что поле _id каждого элемента в prods уникально, эти данные лучше подходят для key реквизита, чем ind.

Answer 2

Проблема в том, что вам не нужно использовать map до prods[key], потому что это не массив

return(
         Object.keys(prods).map((key, i) => (
              <div key={prods[key]._id}>
               <h3>{prods[key].name}</h3>
             </div>
        ))
    )

Answer 3

Первое, что вам нужно сделать, это сопоставить object array, затем прочитать ключи и значения внутри этого объекта.

Это способ получить ключи и значения в массиве объектов.

   render() {
        const obj = [{_id: "5ceea2eb0023ee3bcc730cc7", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "SUP", name: "Superior"},
          {_id: "5ceebf7ea686a03bccfa67bf", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "ULT", name: "Ultimate"},
          {_id: "5ceec48fa686a03bccfa67c4", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "PRO", name: "Professional"}
        ]

        return(
          <>
            {obj.map((item, i) => (
              Object.keys(item).map(key=>{
                return <div>
                  <h3>key: {key}, value: {item[key]}</h3>
                </div>
              })             
            ))}
          </>
        )
      }