Question

我在使用状态时遇到问题，我确定我从API获取的数据是正确的，因为我使用console.log（）检查它，并且由于某种原因，错误只发生在搜索超过1个字母。我试图在map，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将是：

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

如果有时这是空的，你可以将它分配给空数组：

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

希望这会有所帮助。

当状态更新时，“无法读取未定义的属性'map'ReactJS

1 个答案: