ReactJS：使用带有地图键的对象渲染对象

ReactJS: Render an object with keys with map

来源: link 标签:javascriptreactjsecmascript-6 更新时间:

  问题

我是reactjs / 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}
)

谢谢

  最佳答案

您可以更新组件 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 的当前索引）。假设 prods 中每个项目的 _id 字段都是唯一的,则该数据将比 ind 更适合 key 道具。

  相同标签的其他问题

javascriptreactjsecmascript-6
上一个问题:
下一个问题: