在反应组件中，我如何映射作为对象数组的 json 属性？

Question

实际上，我是 React 开发的新手，我想展示带有摘要的产品页面，但在 JSON 中我有一个对象数组（也许，在代码中显示）。当我尝试使用 .map 时，我收到了一个错误，比如 prop 未定义。

我有如下 JSON 对象

{
      "id": 794,
      "name": "Pellentesque habitant morbi",
      "description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
      "short_description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
      "sku": "1000",
      "price": "200",
      "categories": [
        {
          "name": "Best Seller"
        }
      ],
      "regular_price": "21.99",
      "tags": [
        {"name" : "Books Online"},
        {"name" : "Ebooks"},
      ],
      "images": [
        {
          "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
        },
        {
          "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
        }
      ],
      "author": "Mo. Ra. Walambe"
    }

在我的组件渲染方法中，我正在这样做

rendor(){
 var tags = [];
 const prodSum = this.props.product;
 tags = prodSum.tags.map( (tag) => {
     return <li>{tag.name}</li>;
 });

 return(
         <h1 className="product_title">{prodSum.name}</h1>
         <span className="posted_in">
            Categories: <ul>{tags}</ul>
         </span>
 );
};

错误是：prodSum.tags 未定义，我可以在其中显示 prodSum.name

为什么它不适用于数组。

我要显示标签列表

Answer 1

正如我在评论中所做的那样，您可以有条件地渲染您的组件。

const product = {
  id: "794",
  name: "Pellentesque habitant morbi",
  description:
    "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
  short_description:
    "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
  sku: "1000",
  price: "200",
  categories: [
    {
      name: "Best Seller"
    }
  ],
  regular_price: "21.99",
  tags: [
    {
      name: "Books Online"
    },
    {
      name: "Ebooks"
    }
  ],
  images: [
    {
      src: "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg"
    },
    {
      src: "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg"
    }
  ],
  author: "Mo. Ra. Walambe"
};

function fakeApi() {
  return new Promise(resolve => setTimeout(() => resolve(product), 2000));
}

class App extends React.Component {
  state = {
    product: null,
  };

  componentDidMount() {
    fakeApi().then(product => this.setState({ product }));
  }

  render() {
    return (
      <div>
        <Product product={this.state.product} />
      </div>
    );
  }
}

function Product(props) {
  const { product } = props;
  if (!product) return <div>Getting the product...</div>;
  
  const tags = product.tags.map(tag => {
    return <li>{tag.name}</li>;
  });

  return (
    <div>
      <h1 className="product_title">{product.name}</h1>
      <span className="posted_in">
        Categories: <ul>{tags}</ul>
      </span>
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

不要考虑fakeApi 部分，我只是在那里模拟获取部分。我不确定您如何在父组件中初始化 product 状态，但正如您所见，我正在使用 null 进行初始化。所以我可以在子组件中检查它的存在。如果没有product，我正在渲染一条临时信息。获取产品子组件后重新渲染并返回产品信息。

正如您在 cmets 中看到的，可能还有其他情况。例如，您可以将初始状态设置为 {} 并检查其属性是否存在，例如 tags 或将它们设置为空值，例如 [] 以进行第一次渲染。

使用条件渲染是常见的用法。 React 可以处理undefined 值，这没有任何问题。这就是为什么prodSum.name 不是问题的原因，因为它是undefined。但是 Javascript 不能处理像 undefined.someValue 这样的东西。因为您试图从undefined 获取someValue，这是不可能的。 prodSum.tags[0].name 在这里是undefined.name。