Question

我想通过在数组上使用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电话获取图书的价值。

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

如果你了解发生了什么，谢谢你。

Answer 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]}))
    })
  }

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

Answer 3

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

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

React - 在Map函数中添加组件而不添加

3 个答案: