Question

JS。我尝试执行以下应用程序，并收到错误＆＃34; Uncaught TypeError: Cannot read property 'checked' of null＆＃34;任何人都可以帮助我，为什么我得到一个空状态。为什么我无法阅读。

在if语句中的Checkbox.js中收到错误，即

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;

Answer 1

如果您使用的是最新版本的React和ES6。不推荐使用“getInitialState”。

相反。

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

另外使用PureComponent而不是Component作为Component进行深层对象重新整理检查。

Answer 2

您没有正确设置状态，因为您的方法没有绑定。

您可以这样做：

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

或在构造函数

中

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

Answer 3

使用构造函数而不是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;

为什么我的州是空的？

3 个答案: