Javascript React组件中的onChange未按预期运行

我正在为一个简单的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;

从“React”导入React；
从“react”导入{Component}；
从“react router dom”导入{Link}；
从“/Book”导入图书；
从“/BooksAPI”导入*作为BooksAPI；
类SearchBooks扩展组件{
状态={
查询：“”，
搜索图书：[]
};
updateQuery=query=>{
this.setState（{query:query}）；
log（this.state.query）；
if（this.state.query）{
BooksAPI.search（this.state.query）.then（books=>{
this.setState（{searchedbooks:books}）；
});
}
};
render（）{
返回(
关
{
this.updateQuery（event.target.value）；
}}
/>
{this.state.searchedBooks.map（book=>(
))}
);
}
}
导出默认搜索簿；

它应该是一个搜索栏，当用户键入查询时，它列出从API返回的书籍 我有两个问题。第一个事实是，当调用API时，查询不包含用户键入的最后一个字母。 第二个问题是，即使进行了API调用并返回this.state.searchedBooks数组，该数组仍然为空。 这是我第一次使用React，因此我非常感谢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是异步的。您是否检查后端是否返回了内容？它返回一个包含内容的数组