javascript - 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 documentation