遍历 React/Jsx 中的对象列表

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...?)

更新--- 我尝试了这种替代方法

  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) => { ... }) 中）实际上是您的 "book" 对象。

所以，当反应说：

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

这是说它不知道如何呈现您的 "book" 对象。您正在尝试使用 {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 中的对象列表

Traversing Through List of Objects in React/Jsx

arrays

traversal

object

jsx

reactjs