状态更新后“无法读取未定义的属性'map'”

Question

I´m having an issue when udating the state, i´m sure the data i´m getting from the API is right cause i check it with the console.log(), and for some reason the error only happens for searchs with more than 1 letter. I tried solving this using conditionals before the map, mobx and just the normal setState.

This is the code using 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>
    )
}
})

and this is the searchBooks function without mobx:

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

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

  console.log(this.state.books)
}

I have no idea how to solve this issue. thanks for the help.

Answer 1

From what I can gather from your code snippet your this.state.books is undefined that's because

while setting books in your state you are doing it wrongly it should be

this.setState({books: books})

and immediately after that console.log() wont always give you the updated results.

so now your searchBooks will be:

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

and if sometime this is empty you can assign it to empty array:

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>
);

Hope this helps.