Question

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

this.props.selectedProducts.products.title

我以为会映射到json数据的“ title”部分根本不起作用。谁能告诉我我在做错什么以及可能如何纠正它？预先感谢！

JSON：

selectedProducts: [
  {
    “start”: “Tue Jun 19 16:55:40 BST 2018”,
    “products”: [
      {
        “title”: “SL Primary - Alaska (Westlaw PRO™)“,
        “price”: “”
      },
      {
        “title”: “SL Ninth Circuit Primary Law (Westlaw PRO™)“,
        “price”: “”
      }
    ]
  }
],

反应：

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>
    );
  });
}

Answer 1

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>
    );
  });
}

Answer 2

您应该使用以前选择的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>)
      )
    )
  }

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

使用JSON对象时如何在React中映射特定项目

2 个答案: