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

Posted 2023-02-22

【中文标题】React - 在地图功能中添加组件不添加

【英文标题】：React - Adding component in Map function not adding

【发布时间】：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，问题已解决

【参考方案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]))
        
      )
    )