javascript - 遍历对象列表未正确显示

我正在尝试显示对象循环。它通过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，并且得到了相同的结果，所以我认为这不是对象的循环方法的问题。

最佳答案

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

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语法错误，应如上所述编写。

关于javascript - 遍历对象列表未正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55768971/