как отладить код с console.log, когда код работает медленно

Question

Я практикую реакцию, и сейчас я собираюсь составить список дел. Пока я работал Я хотел проверить свой код с console.log, чтобы убедиться, что входные значения правильно передаются в состояние. Однако какое-то время я не мог понять, как console.log всегда будет выводить предыдущее состояние. До тех пор, пока я просто вставил <p>{this.state.myArray}</p>, и это показывает, что работает правильно. Я предполагаю, что this.setState({ myArray: this.state.message }); все еще завершает выполнение, пока console.log уже выполнен.

Я почти уверен, что я использую console.log неправильным способом тестирования кода. Новый программист здесь.

class ToDoInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { message: "", myArray: "" };
  }

  handleChange(e) {
    this.setState({ message: e.target.value });
    console.log("handleChange: " + this.state.message); //testing
  }

  handleSubmit(e) {
    this.setState({ myArray: this.state.message });
    console.log("handleSubmit: " + this.state.myArray); //testing
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.content}
          onChange={this.handleChange}
        />
        <input type="button" value="submit" onClick={this.handleSubmit} />
        <p>{this.state.myArray}</p>
      </form>
    );
  }
}

codeSandBox link

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что setState является асинхронным и что оно устанавливает состояние не сразу, а после небольшой задержки. Существует несколько причин, по которым React делает это, но одна из них заключается в том, что он позволяет React сгруппировать несколько изменений состояния и затем повторно визуализировать ваш компонент вместо повторного рендеринга при каждом вызове setState.

Если вы хотите использовать состояние после установки состояния, вы можете использовать второй аргумент setState, например:

  handleSubmit(e) {
    this.setState({ myArray: this.state.message }, () => {
      console.log("handleSubmit: " + this.state.myArray);
    });
  }

Подробнее о setState можно узнать здесь. Хотя эта проблема Github, вероятно, более глубока, чем вы ищете.

В вашем примере выше, возможно, стоит поместить console.log(this.state) в вашу функцию render, так как она всегда должна иметь больше всего современное состояние.