使用json对象时如何映射react中的特定项

我有一个json对象，我正试图将它映射到react组件中的一个表中。我很难从json对象中访问“标题”和“工具提示”。控制台日志成功地向我显示了整个json对象，但是

this.props.selectedProducts.products.title

我认为这会映射到json数据的“标题”部分根本不起作用。有谁能告诉我我做错了什么&可能是如何纠正的？提前谢谢

JSON:

反应：

renderProducts() {
  const selected = this.props.selectedProducts;

  return this.props.selectedProducts.map((selected, i) => {
    return ( 
      <tr className="product-cells" key={i}>
        <td> {selected.title} </td>
        <td> {selected.price}</td>
      </tr>
    );
  });
}

renderProducts（）{
const selected=this.props.selectedProducts；
返回此.props.selectedProducts.map（（selected，i）=>{
报税表（
{选定的.title}
{selected.price}
);
});
}

selectedProducts

是一个数组，因此您必须访问数组中的第一个对象，并映射到

products

：

renderProducts() {
  return this.props.selectedProducts[0].products.map((selected, i) => {
    return ( 
      <tr className="product-cells" key={i}>
        <td> {selected.title} </td>
        <td> {selected.price}</td>
      </tr>
    );
  });
}

renderProducts（）{
返回此.props.selectedProducts[0].products.map（（selected，i）=>{
报税表（
{选定的.title}
{selected.price}
);
});
}

您应该使用前面回答的selectedProducts数组的第一个元素，或者如果有更多对象，则使用第二个映射：

  renderProducts() {
    return (
      this.props.selectedProducts.map(el =>
        el.products.map(selected => 
        <tr className="product-cells" key={selected.title}>
          <td> {selected.title} </td>
          <td> {selected.price}</td>
        </tr>)
      )
    )
  }

renderProducts（）{
返回(
this.props.selectedProducts.map（el=>
el.products.map（选定=>
{选定的.title}
{selected.price}
)
)
)
}

---

不要将索引用作键。如果您这样做，可能会出现一些问题。

您是否打算将

selectedProducts

作为一个数组？json实际上来自其他地方，因此我必须按@JordanS的原样使用它

  renderProducts() {
    return (
      this.props.selectedProducts.map(el =>
        el.products.map(selected => 
        <tr className="product-cells" key={selected.title}>
          <td> {selected.title} </td>
          <td> {selected.price}</td>
        </tr>)
      )
    )
  }