React组件中的onChange表现不符合预期

Question

我正在为一个简单的React应用编写组件，这是我的代码：

import React from "react";
import { Component } from "react";
import { Link } from "react-router-dom";
import Book from "./Book";
import * as BooksAPI from "./BooksAPI";

class SearchBooks extends Component {
  state = {
    query: "",
    searchedBooks: []
  };

  updateQuery = query => {
    this.setState({ query: query });
    console.log(this.state.query);
    if (this.state.query) {
      BooksAPI.search(this.state.query).then(books => {
        this.setState({ searchedbooks: books });
      });
    }
  };

  render() {
    return (
      <div className="search-books">
        <div className="search-books-bar">
          <Link className="close-search" to="/">
            Close
          </Link>
          <div className="search-books-input-wrapper">
            <input
              type="text"
              placeholder="Search by title or author"
              value={this.state.query}
              onChange={event => {
                this.updateQuery(event.target.value);
              }}
            />
          </div>
        </div>
        <div className="search-books-results">
          <ol className="books-grid">
            {this.state.searchedBooks.map(book => (
              <div key={book.id}>
                <Book
                  book={book}
                  updateShelf={this.props.updateShelf}
                  updateBooks={this.props.updateBooks}
                />
              </div>
            ))}
          </ol>
        </div>
      </div>
    );
  }
}

export default SearchBooks;

它应该是一个搜索栏，其中列出了用户键入查询时从API返回的书籍，但我有两个问题。 首先是这样的事实，即发送对API的调用时，查询不包含用户键入的最后一个字母。 第二个，即使在进行API调用并返回时，this.state.searchedBooks数组仍然为空。 这是我第一次与React合作，因此我将非常感谢您的任何帮助

Answer 1

React的setState()是一个异步函数。 它是异步的，因为React可能将多个setState()调用批处理在一起。

由于其性质，当您尝试在setState()之后使用this.state.query ，状态尚未更新。 为了实现您的目标，可以使用setState()的第二个参数，该参数在状态更新后用作回调函数。

this.setState({ query: query }, () => {
  console.log(this.state.query);
  if (this.state.query) {
    BooksAPI.search(this.state.query).then(books => {
      this.setState({ searchedbooks: books });
    });
  }
});

参考： React setState文档