代码运行缓慢时如何使用console.log调试代码

Question

我正在练习react，现在我要列一个to-do list。 在我工作的时候。 我想用 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>
    );
  }
}

代码沙盒链接

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函数中可能是值得的，因为它应该始终具有最新状态。