时间戳

首页 > 解决方案 > React 组件中的 onChange 未按预期运行

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;

它应该是一个搜索栏，当用户键入查询时列出从 API 返回的书籍我有两个问题。首先是当发送 API 调用时，查询不包含用户输入的最后一个字母。第二个即使调用 API 并返回 this.state.searchedBooks 数组仍然是空的。这是我第一次使用 React，所以我会感谢任何形式的帮助

标签： javascriptarraysreactjs

解决方案

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

由于其性质，当您尝试使用this.state.queryaftersetState()时，状态尚未更新。为了实现您的目标，您可以使用 的第二个参数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 文档

推荐阅读