未捕獲的TypeError：無法讀取未定義的屬性'setState'

Question

我試圖用web-pack渲染簡單的react應用程序，所有代碼都可以完美編譯。 在運行時，代碼失敗，並帶有以下堆棧跟蹤：

Uncaught TypeError: Cannot read property 'setState' of undefined
at checkBoxCheck (App.js:174)...

這是帶有setState的代碼：

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };
  }

  checkBoxCheck(event) {
    this.setState({
      remember: !this.state.remember
    });
    console.log(this.state.remember);
  }

  render() {
    let msg = this.state.remember ? "checked" : "uncheked";
    return (
      <form method="post">
        <h1>{msg}</h1>
        <label htmlFor="login">Login: </label>
        <input type="text" name="login" />
        <label htmlFor="pass"> Password: </label>
        <input type="password" name="pass" />
        <label htmlFor="remember">Remeber me: </label>
        <input
          type="checkbox"
          name="remember"
          defaultChecked={this.state.remember}
          onChange={this.checkBoxCheck}
        />
      </form>
    );
  }
}

語法問題在哪里？

我也試圖做一個checkBoxCheck'arrow'函數，導致編譯錯誤：

    checkBoxCheck = event => {
    this.setState((prevState, props) =>({
        remember: !prevState.remember
    }));
    console.log(this.state.remember);
}

//output        
SyntaxError: D:/Projects/Learning-projects/learn-react/src/App.js: Unexpected token (53:18)

  51 |     }
  52 |
> 53 |     checkBoxCheck = event => {
     |                   ^
  54 |         this.setState((prevState, props) =>({
  55 |             remember: !prevState.remember
  56 |         }));

Answer 1

您實際上忘記了將上下文綁定到checkBoxCheck方法。

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck.bind(this)} // <- .bind(this)
/>
...

---

提示：

關於您的代碼，很少有評論：

1. 不要在render方法中綁定上下文。
2. 不要在this.setState函數中使用this.state

永遠不要在render .bind()

render() { // <- If you here
  ...
  <input
    ...
    onChange={this.checkBoxCheck.bind(this)} // <- don't do this
  />
  ...
}

通過這樣綁定事件處理程序，您可以在每次React調用組件的渲染器時創建全新的函數。 相反，您可以將函數轉換為箭頭函數：

checkBoxCheck = event => {
  this.setState({
    remember: !this.state.remember
  });
  console.log(this.state.remember);
}

並這樣稱呼它：

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck} // <- there is no binding
/>
...

另外，您可以將所有方法綁定到類構造函數中：

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };

    this.checkBoxCheck = this.checkBoxCheck.bind(this); // <- Bind your methods here
  }
...

並在沒有綁定的情況下調用函數：

...
<input
   type="checkbox"
   name="remember"
   defaultChecked={this.state.remember}
   onChange={this.checkBoxCheck} // <- there is no binding
/>
...

使用this.state一個內this.setState

一個例子可以是一個增量函數：

function increment() {
  this.setState({value: this.state.value + 1});
}

如果將這兩個setState操作成批分組在一起，則給定的值為1：

setState({value: 1 + 1})
setState({value: 1 + 1})

可以通過使用將先前狀態作為第一個參數的回調來避免這種情況：

function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

然后，即使事情成批發生，react也會以正確和更新的狀態調用參數。 上面的示例如下所示：

setState({value: 1 + 1})
setState({value: 2 + 1})

參考文獻：

• https://ryanfunduk.com/articles/never-bind-in-render/
• https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md

Answer 2

發生這種情況是因為您需要將this.checkBoxCheck綁定到this 。

添加此： this.checkBoxCheck = this.checkBoxCheck.bind(this)到您的構造函數。

例：

//App.js
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { remember: false };

    this.checkBoxCheck = this.checkBoxCheck.bind(this);
  }

  checkBoxCheck(event) {
    this.setState({
      remember: !this.state.remember
    });
    console.log(this.state.remember);
  }

  render() {
    let msg = this.state.remember ? "checked" : "uncheked";
    return (
      <form method="post">
        <h1>{msg}</h1>
        <label htmlFor="login">Login: </label>
        <input type="text" name="login" />
        <label htmlFor="pass"> Password: </label> 
        <input type="password" name="pass" />
        <label htmlFor="remember">Remeber me: </label>
        <input
          type="checkbox"
          name="remember"
          defaultChecked={this.state.remember}
          onChange={this.checkBoxCheck}
        />
      </form>
    );
  }
}