Question

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

谢谢

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（而不是{{ 1}}。假设item中每个项目的_id字段都是唯一的，那么该数据将比prods更适合key道具。

Answer 2

问题是您不需要使用for NSTextCheckingResult *match in [regex matchesInString:... options:... range:...] do extract the substring at match.range from modified string uppercase it replace the substring at match.range with uppercased result到map，因为它不是数组

prods[key]

Answer 3

您需要做的第一件事是映射devices，然后读取该对象内部的键和值。

这是在对象数组中获取键和值的方法。

object array

ReactJS：使用带有地图键的

编辑：

3 个答案: