爲什麼我的狀態爲空？

js。我試圖執行下面的應用程序，我收到一個錯誤，「Uncaught TypeError: Cannot read property 'checked' of null」任何人都可以請幫助我，爲什麼我得到一個空狀態。爲什麼我無法閱讀檢查。爲什麼我的狀態爲空？

在接收錯誤Checkbox.js if語句即

if (this.state.checked) {

的index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="react-container"></div> 
    </body> 
</html>

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Checkbox from './Checkbox'; 

ReactDOM.render(<Checkbox />, document.getElementById('react-container'));

Checkbox.js

import React, { Component } from 'react'; 

class Checkbox extends Component { 
    getInitialState(){ 
     return {checked: false} 
    } 
    handleCheck(){ 
     this.setState({checked: !this.state.checked}) 
    } 
    render() { 
     var message 
     if (this.state.checked) { 
      message = "Checked" 
     } else { 
      message = "Unchecked" 
     } 
     return (
      <div> 
       <label><input type = "checkbox" onChange = {this.handleCheck}></input></label> 
       <p>This box is {message}</p> 
      </div> 
     ); 
    } 
} 

export default Checkbox;

來源

2017-10-17 Purushotham Kumar

如果您使用最新版本的React和ES6。「getInitialState」已棄用。

取而代之。

class Checkbox extends Component{ 
    state = { 
     checked: false, 
    } 
}

同樣使用PureComponent的組件作爲組件做深度對象重新校驗檢查。

來源

2017-10-17 07:41:07

感謝，但現在它拋出一個錯誤「 Checkbox.js：8 Uncaught TypeError：無法讀取未定義的屬性'setState'is this.setState也被棄用，我正在使用在handleCheck函數中 –

PureComponent與Component是不同的問題。無論如何，Component沒有對象對齊（它在每個setState上呈現），而PureComponent進行淺層檢查以避免在具有相同的道具/狀態時重新呈現。 –

@DanielAndrei，這只是最後的一個建議。 –

由於您的方法未綁定，因此您沒有正確設置狀態。

你可以這樣做，而不是：

handleCheck =() => { 
     this.setState({checked: !this.state.checked}); 
    };

或在構造函數中的

constructor() { 
    super(); 
    this.state = {checked: false}; 
    this.handleCheck = this.handleCheck.bind(this); 
}

來源

2017-10-17 08:03:27

使用構造函數，而不是getInitialState： -

import React, { Component } from 'react'; 

class Checkbox extends Component { 
    constructor(){ 
     super(); 
     this.setState({checked: false}); 
    } 
    handleCheck(){ 
     this.setState({checked: !this.state.checked}) 
    } 
    render() { 
     var message 
     if (this.state.checked) { 
      message = "Checked" 
     } else { 
      message = "Unchecked" 
     } 
     return (
      <div> 
       <label><input type = "checkbox" onChange = {this.handleCheck}></input></label> 
       <p>This box is {message}</p> 
      </div> 
     ); 
    } 
} 

export default Checkbox;

來源

2017-10-17 08:06:42 Shalin

爲什麼我的狀態爲空？

回答

相關問題