Arrays 遍历React/Jsx中的对象列表

我在尝试遍历JSX中的对象列表时遇到问题

  renderBooks(book) {
    return(
      <div> A new book </div>
      {book.id}, {book.timeIn}
    );
  }


    render() {
        console.log("the values are", this.props.bookList);    
        return (
            <div >
              <h1> The Books </h1>
                   {this.props.bookList.map(this.renderBooks.bind(this))}
            </div>
        );
    }   
}

问题是timeIn返回uz.mapthis.props.bookList，timeIn=>{…}实际上是您的book对象

所以，当react说：

错误：找到的对象作为React子对象无效：具有键{address，resolved，timeIn}的对象

这意味着它不知道如何渲染图书对象。您试图使用{timeIn}来呈现它。在本例中，它不是timeIn属性，而是整个book对象

您只需要正确使用book对象。像这样的方法会奏效：

渲染书{ return\uu.mapthis.props.bookList，book=>{ 回来 {book.id}-{book.timeIn} }; } 或者，如果可以使用对象分解，则可以采用更时尚的方式：

渲染书{ 返回{id，timeIn}=>{ 回来 {id}-{timeIn} }; }

---

希望有帮助

这很有道理，谢谢！有一个问题是我可以访问对象名吗-KBMASG9X当然！Lodash允许您这样做。可以在映射中使用第二个参数。例如：{a:1，b:2}，value，key=>console.logvalue，key；将有对象值在内的值和对象键（在您的示例中为-KbMAsG9X内键）。

  renderBooks() {
    return _.map(this.props.bookList, (timeIn) => {
      return(       
        <li className="list-group-item">
            {timeIn}
            <button
              className="btn btn-danger right">

              Book Exists
            </button>
          </li>
        );
    });
  }

    render() {
        return (
            <div >
              <h1> The Books </h1>
              {this.renderBooks()}
            </div>
        );
    }
}

Error: Objects are not valid as a React child (found: object with keys {address, resolved, timeIn})