React - 在地图功能中添加组件不添加答案

【问题标题】：React - Adding component in Map function not addingReact - 在地图功能中添加组件不添加
【发布时间】：2018-05-05 18:24:28
【问题描述】：

我想通过在数组上使用 map 函数将组件添加到 dom 中。 {books.map((book) => <Book/>)}

但是，它没有添加任何东西，就好像书籍数组是空的？我使用{console.log(books)} 打印书籍，它不是空的。这里有什么问题？我已经附加了我的渲染功能。

  render() {
    let books = this.state.books;
    return (<div className="bookshelf">
      <h2 className="bookshelf-title">{this.titles[this.props.shelf]}</h2>
      <div className="bookshelf-books">
        <ol className="books-grid">
          {books.map((book) => <Book/>)}
        </ol>
      </div>
    </div>)
  }

对于任何人的信息，我通过 api 调用获取 book 的值。

  componentWillMount() {
    BooksAPI.getAll().then((books) => {
      books.forEach((book) => {
        if (this.state.shelf === book.shelf){
          // console.log(book);
          this.state.books.push(book);
        }
      })
    })
  }

如果你明白发生了什么，谢谢。

【问题讨论】：

可能 API 调用尚未返回，您正在使用 books 数组。您能否提供更多信息，例如整个文件？
@Ajay Gaur Hi Ajay，问题已解决

标签： javascript arrays reactjs dictionary

【解决方案1】：

问题在于您是directly mutating 状态并且它不会重新渲染，因此更改不会反映在您的 DOM 中。使用setState 更新状态

componentWillMount() {
    BooksAPI.getAll().then((books) => {
      const tempBooks = [];
      books.forEach((book) => {
        if (this.state.shelf === book.shelf){
          // console.log(book);
          tempBooks.push(book);
        }
      })
      this.setState(prevState => ({books: [...prevState.books, ...tempBooks]}))
    })
  }

【讨论】：

成功了，谢谢！我意识到我不应该直接改变状态！
请不要要求接受答案。你怎么这么不耐烦？
这个方法不对，你确实是在数组里面加一个数组
更新了答案
没关系，我已经回答了我自己的问题

【解决方案2】：

render() {
    let books = this.state.books;
    return (<div className="bookshelf">
      <h2 className="bookshelf-title">{this.titles[this.props.shelf]}</h2>
      <div className="bookshelf-books">
        <ol className="books-grid">
          {books.map((book) => return(<Book/>))}
        </ol>
      </div>
    </div>)
  }

【讨论】：

单行语句不需要return，
不用return

【解决方案3】：

这是正确的解决方法。我想将这本书添加到上一个数组中。

  componentWillMount() {
    BooksAPI.getAll().then((books) => {
      books.forEach((book) => {
        if (this.state.shelf === book.shelf) {
          this.setState(prevState => ({books: [...prevState.books, book]}))
        }
      })
    })
  }

【讨论】：