代碼運行緩慢時如何使用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函數中可能是值得的，因為它應該始終具有最新狀態。