问题

我是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