javascript - 我的 console.log 在错误的地方，但我不明白为什么

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)
    });