循环遍历对象列表未正确显示

Question

我正在尝试显示一个对象循环。它通过console.log 显示，但它没有显示在浏览器上。我目前的代码如下：

class Profile extends React.Component {
    renderList() {
        const { booking } = this.props;  
        booking && Object.keys(booking).map(x => {
            console.log("booking", booking[x].item_name);
            return <div>{booking[x].item_name}</div>
        })
    }
    render() {
        return (
        {this.renderList()}
        )
    }
}

我尝试了for 循环、map 以及 lodash，我得到了相同的结果，所以我认为这不是对象循环方法的问题。

Answer 1

您还需要返回元素。试试这个：

class Profile extends React.Component {
    renderList() {
        const { booking } = this.props;  
        if (booking) {
            return Object.keys(booking).map(x => {
                return <div>{booking[x].item_name}</div>
            })
        }
        return null;
    }
    render() {
        return this.renderList();
    }
}

可能return bookings && Object.keys(booki... 也可以。

更新：return ({ this.renderList() })会报jsx语法错误，应该写成如上。

Answer 2

1. 您显然从 renderList 方法中省略了 return 关键字
2. 您应该在从渲染函数返回时将 renderList 方法调用包装在根单个元素中。 附带说明一下，为了获得更好的编码体验，不要忘记在基于类的组件中定义 defaultProps 静态属性，并在功能组件中定义默认的 ES2015 参数

class Profile extends React.Component {
     static defaultProps = {
        booking: {
          first_item: {
            item_name: "First name"
          },
          second_item: {
            item_name: "Second name"
          }
        }
     }

    renderList = () => {
        const { booking } = this.props;  
        return booking ? Object.keys(booking).map(x => <div>{booking[x].item_name}</div>) : null 
    }

    render() {
        return (
          <div>
           {this.renderList()} 
          </div>  
        )
    }
}