"状態が更新されるとプロパティ 'map'が未定義です" ReactJS

Question

状態をudatingするときに問題が発生しました。私はAPIから取得しているデータが正しいと思いますconsole.log（）、何らかの理由で、エラーは1文字以上の検索でのみ発生します。私はマップ、mobxとちょうど通常のsetStateの前に条件を使ってこれを解決しようとしました。

これはmobxを使用してコードです：

const BookSearch = observer(class BookSearch extends Component{ 

state = observable({ 
    query: '', 
    books: [] 
}) 

searchBooks = (query) =>{ 
    console.log(query.target.value) 
    this.state.query = query.target.value 

    BooksAPI.search(query.target.value, 20).then((books) =>{ 
     console.log(books) 
     this.state.books = books; 
     console.log(this.state.books) 
    }) 
    console.log(this.state.books) 

} 

render(){ 

    const { query } = this.state; 

    const bookSearch = this.state.books.map((book) => 
      <li key={book.id}> 
       <div className="book"> 
        <div className="book-top"> 
         <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${ book.imageLinks.thumbnail })` }}></div> 
         <div className="book-shelf-changer"> 
          <select onChange={(event) => this.props.bookChange(book, event.target.value)}> 
           <option>Move to...</option> 
           <option value="currentlyReading">Currently Reading</option> 
           <option value="wantToRead">Want to Read</option> 
           <option value="read">Read</option> 
           <option value="none">None</option> 
          </select> 
         </div> 
        </div> 
        <div className="book-title">{ book.title }</div> 
        <div className="book-authors">{ book.authors.map((author) => 
         <span key={ author + book.title } >{ author }</span> 
        )}</div> 
       </div> 
      </li> 
     ) ; 


    return(

     <div> 
     <div className="search-books"> 
      <div className="search-books-bar"> 
       <Link className="close-search" to='/'>Close</Link> 
       <div className="search-books-input-wrapper"> 
        {/* 
         NOTES: The search from BooksAPI is limited to a particular set of search terms. 
         You can find these search terms here: 
         https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md 

         However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if 
         you don't find a specific author or title. Every search is limited by search terms. 
        */} 
        <input 
         type="text" 
         placeholder="Search by title or author"  
         onChange={ this.searchBooks} 
        /> 
       </div> 
      </div> 
      <div className="search-books-results"> 
       <div className="bookshelf"> 
      <h2 className="bookshelf-title">{ this.state.query }</h2> 
      <div className="bookshelf-books"> 
       <ol className="books-grid"> 
        { bookSearch } 
       </ol> 
      </div> 
     </div> 
     </div> 
     </div> 

     </div> 
    ) 
} 
}) 

、これはmobxなしsearchBooks機能である：

searchBooks = (query) =>{ 
    this.setState({ query: query.trim() }); 

    BooksAPI.search(query, 20).then((books) =>{ 
    this.setState({ books: books }); 
    }) 

    console.log(this.state.books) 
} 

私はこの問題を解決する方法は考えています。助けてくれてありがとう。私はあなたのコードから収集することができるものから、

Answer 1

は、あなたのthis.state.booksは、あなたが誤ってそれを

やっているあなたの状態で本を設定しながらので、それがその後の

this.setState({books: books})

とすぐにする必要があることだ定義されていないスニペットconsole.log()は常に更新された結果を提供しません。

ので、今、あなたのsearchBooksは次のようになります。このことができます

const {books = []} = this.state 
const bookSearch = books.map((book) => 
    <li key={book.id}> 
    <div className="book"> 
     <div className="book-top"> 
     <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div> 
     <div className="book-shelf-changer"> 
      <select onChange={(event) => this.props.bookChange(book, event.target.value)}> 
      <option>Move to...</option> 
      <option value="currentlyReading">Currently Reading</option> 
      <option value="wantToRead">Want to Read</option> 
      <option value="read">Read</option> 
      <option value="none">None</option> 
      </select> 
     </div> 
     </div> 
     <div className="book-title">{book.title}</div> 
     <div className="book-authors">{book.authors.map((author) => 
     <span key={author + book.title} >{author}</span> 
    )}</div> 
    </div> 
    </li> 
); 

希望を：

searchBooks = (query) =>{ 
    console.log(query.target.value) 
    this.state.query = query.target.value 
    BooksAPI.search(query.target.value, 20).then((books) =>{ 
     console.log(books) 
     this.setState({books}); 
     // reactive way you can also do this.setState({books: books}) 
    }) 
} 

といつかこれが空の場合は空の配列に割り当てることができ

。