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

您显然从 renderList 方法中省略了 return 关键字
从render函数返回时，您应该将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>  
        )
    }
}

遍历对象列表无法正确显示

2 个答案: