javascript - 第一次调用函数来更改状态不会更新任何字段

Question

所以基本上我将 GraphQL 与 React Web 应用程序集成来进行一些测试并了解有关堆栈的更多信息(如果我是新手，请原谅我)。

简单来说，我基本上有一个图书库应用程序，其中有一个图书列表和一个作者列表，一个作者可以写很多本书，并且一本书与一个作者相关联。

我有 1 个基类组件，其中包含我的逻辑(目前是根文件 app.js)，您可以在下面看到代码:

APP.JS

import React, { Component } from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

import BooksList from "./components/Books/Books";
import AddBook from "./components/AddBook/AddBook";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

class App extends Component {
  state = {
    name: "",
    genre: "",
    authorId: ""
  };

  addAuthorHandler = (e, name) => {
    console.log(e.target.value);
    this.setState({
      [name]: e.target.value
    });

    console.log(this.state);
  };

  render() {
    return (
      <ApolloProvider client={client}>
        <div className="bookList">
          <BooksList />
        </div>
        <AddBook addAuthor={this.addAuthorHandler.bind(this)} />
      </ApolloProvider>
    );
  }
}

export default App;

该问题与 addAuthorHandler 函数有关，第一次调用它时，它会收到值，但状态未正确更新。

由于 booklist 组件对于本例并不重要(因为它只显示书籍)，因此 AddBook 组件在 prop 中引用函数 addAuthorHandler，代码如下:

import React from "react";
import { Query } from "react-apollo";
import { getAuthorsQuery } from "../../graphql/queries/queries";
import Classes from "./AddBook.module.css";

const getAuthors = ({ data: { authors }, loading }) => {
  let render = <option disabled>Loading authors...</option>;

  if (!loading) {
    render = authors.map(author => {
      return (
        <option value={author.id} key={author.id}>
          {author.name}
        </option>
      );
    });
  }

  return render;
};

const addBook = props => {
  return (
    <div className={Classes.addBook}>
      <form className={Classes.form}>
        <div className={Classes.formBlock}>
          <span>Book Name</span>
          <div>
            <input
              className={Classes.input}
              type="text"
              onChange={e => props.addAuthor(e, "name")}
            />
          </div>
        </div>

        <div className={Classes.formBlock}>
          <span>Genre</span>
          <div>
            <input
              onChange={e => props.addAuthor(e, "genre")}
              className={Classes.input}
              type="text"
            />
          </div>
        </div>

        <div className={Classes.formBlock}>
          <span>Author</span>
          <select
            className={Classes.select}
            onChange={e => props.addAuthor(e, "authorId")}>
            <Query query={getAuthorsQuery}>
              {data => {
                return getAuthors(data);
              }}
            </Query>
          </select>
        </div>
      </form>
    </div>
  );
};

export default addBook;

上面我有一个 onChange 方法，它引用 addAuthor 属性并传递事件和要在状态内更新的属性名称。

第一次改变永远不会发生。

当我在写入“a”时为每个输入加载应用程序时，该属性的状态为空，即使我在状态中写入更多键(如“ab”)，即使该值正在传递给函数处理程序用“a”更新。

预期结果是使第一个更改像当前其他更改一样工作。

对这些人有什么帮助，以及对这个问题的可能解释吗？

非常感谢。

Answer 1

setState 以异步方式工作。这意味着调用 this.setState 不会立即更改 this.state 变量。您需要为此实现回调。像-

addAuthorHandler = (e, name) => {
    console.log(e.target.value);
    this.setState({
      [name]: e.target.value
    }, function () {
      console.log(this.state)
    });    
  };