Question

我在尝试遍历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>
        );
    }   
}

如果我有一个对象列表，上面的代码可以工作，但是FireBase发送的数据看起来像这样，不是对象列表而是对象对象：

有没有办法可以用这些数据做类似的事情以及获取id（-KbMAsG9X ......？）

UPDATE --- 我尝试了这种替代方法

  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>
        );
    }
}

我可以迭代，但我仍然无法访问像resolved或timeIn这样的对象的值。我得到的错误是：

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

Answer 1

问题在于timeIn（在return _.map(this.props.bookList, (timeIn) => { ... })中）实际上是您的“书籍”对象。

所以，当反应说：

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

据说它不知道如何渲染你的“书”对象。您正尝试使用{timeIn}呈现该内容（在这种情况下，它不是属性timeIn，而是整个图书对象）。

您只需要正确使用图书对象即可。这样的东西会起作用：

renderBooks() {
    return _.map(this.props.bookList, (book) => {
        return (
            <li className="list-group-item">
                {book.id} - {book.timeIn}
            </li>
        )
    });
}

或者，以更时尚的方式（如果你可以使用对象解构）：

renderBooks() {
    return _.map(this.props.bookList, ({ id, timeIn }) => {
        return (
            <li className="list-group-item">
                {id} - {timeIn}
            </li>
        )
    });
}

希望它有所帮助！

遍历React / Jsx中的对象列表

1 个答案: