Мой console.log находится не в том месте, но я не понимаю, почему - PullRequest
Новая
       6

Мой console.log находится не в том месте, но я не понимаю, почему

0 голосов
/ 19 ноября 2018

Таким образом, мой console.log печатается так, как будто я на шаг отстаю от своих вызовов onSubmit, но когда я проверяю веб-инструменты React в Chrome, я вижу, что мое состояние обновлено.Может кто-нибудь объяснить мне, что я здесь не так делаю?Я полагаю, что это неправильное понимание асинхронных и синхронных методов, но на самом деле может дать хорошее объяснение этому. 

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;

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Да, 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) });
}
0 голосов
/ 19 ноября 2018

Это должно поддерживать журнал после обновления состояния. 

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