在值存在之前不要渲染

Question

如何在 React 中渲染对象数组

2020-10-13

359

reactjs

我正在编写一个应用程序来响应。我创建了两个组件。一个组件正在从父组件接收一个对象，我想渲染它。这个对象有几个元素，其中一个是几个对象的数组。我在渲染这个数组的元素（对象）时遇到了一些问题。这是主对象：

dishes = {
        id: 3,
        name:'ElaiCheese Cake',
        image: 'assets/images/elaicheesecake.png',
        category: 'dessert',
        label:'',
        price:'2.99',
        description:'A delectable',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },
            {
            id: 1,
            rating: 4,
            comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
            author: "Paul McVites",
            date: "2014-09-05T17:57:28.556094Z"
            }
    ]}

除了数组元素之外，我可以毫无问题地读取对象的所有元素。我尝试了 map 方法：

const menu = this.props.dishes.comments.map((com) => <li key={com.id}>{com.author}</li>);

没有得到任何响应并遇到此错误：未捕获的 TypeError：无法读取未定义的属性“map”

Answer 1

在值存在之前不要渲染

每次您获得 map of undefined 时，您都知道在调用 map 之前的值是未定义的，在本例中， this.props.dishes.comments 的值是未定义的。不要尝试映射未定义的内容，因为 undefined 没有方法 map

const menu = (
  this.props.dishes 
  && this.props.dishes.comments 
  && this.props.dishes.comments.length > 0
) && this.props.dishes.comments.map((com) => <li key={com.id}>{com.author}</li>);

Answer 2

如果要使用地图呈现对象，请执行以下操作

const dishes= Object.keys(this.props.dishes).map((com) => <li key={com}>{com.author}</li>);

针对对象内的数组

const menu = this.props.dishes.comments.map((com) => <li key={com.id}>{com.author}</li>);

Answer 3

您可以在主组件的返回语句中使用内联映射函数。您无需创建新变量，然后在 html 中引用它，只需内联即可。

https://carova.io/snippets/rendering-array-map-in-react

检查数组的“.length > 0”用于确保在尝试映射它们之前数组中有项目。