React - マップ関数のコンポーネントを追加しないでください

Question

マップ関数を使用して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); 
     } 
     }) 
    }) 
    } 

何が起こっているのかご理解いただきありがとうございます。

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