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

反应的sum(3) = 3 + sum(2) = 3 + (2 + sum(1)) = 3 + (2 + (1)) = 6是一个异步函数。它是异步的，因为React可能将多个setState()调用分批处理。

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

setState()

参考：React setState documentation

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

1 个答案: