Question

因此，我的console.log的打印好像我在onSubmit调用上落后了一步，但是当我在Chrome上检查React Web工具时，我看到我的状态是最新的。有人可以告诉我我在做什么错吗？我认为这是对异步和同步方法的误解，但实际上可以对此进行很好的解释。

import React, { Component } from 'react';
import TodoInput from './todo-input';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [],
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };

  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      inputValue: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = {
      title: this.state.inputValue,
      id: Date.now,
      done: false
    };
    this.setState((prevState) => ({
      todos: [...prevState.todos, newTodo]
    }));
    this.setState({inputValue: ''});
console.log(this.state.todos);
  }

  render() {
    const mappedTodos = this.state.todos.map((todo, index) => 
      <div key={index}>
        {todo.title}
      </div>
    )

    return (
        <div>
          <TodoInput
          value={this.state.inputValue}
          onChange={this.handleChange}
          onSubmit={this.handleSubmit}
          />
          {mappedTodos}
        </div>
    );
  }
}

export default App;

Answer 1

这应该在状态更新后控制台日志。

this.setState((prevState) => ({
      todos: [...prevState.todos, newTodo]
    }), () => {
    console.log(this.state.todos)
    });

Answer 2

是的，setState（）是异步调用，因此您的console.log（）返回状态，就好像没有进行任何setState（）调用一样。但是，可以使用setState回调函数参数来产生预期的输出来解决此问题：

handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = {
      title: this.state.inputValue,
      id: Date.now,
      done: false
    };
    this.setState((prevState) => ({
      todos: [...prevState.todos, newTodo],
      inputValue: ''
    }), () => { console.log(this.state.todos) });
}

我的console.log放在错误的位置，但是我不明白为什么

2 个答案: