未捕获的类型错误：无法读取 null React 的属性“setState”

Question

我有以下反应页面并且正在获取

Uncaught TypeError: Cannot read property 'setState' of null

使用计数器时。 似乎与 setState 使用的this

<!DOCTYPE html>
<html>

<head>
    <title>counter</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-beta.3/react-router.min.js"></script>

<head>


<body>


    <div id="entry"></div>

    <script type="text/babel">
        var destination = document.querySelector("#entry");



class Counter extends React.Component {
    constructor() {
        super();
        this.state = { value: 0};
    }

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

  decrement(){
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

ReactDOM.render(
    <div>
        <Counter/>
    </div>,
    destination
)

        </script>
    </body>

</html>

我只是将increment更改为旧式函数，但没有用。

Answer 1

您必须以 ES6 的编写模式将上下文传递给您的自定义函数。

有很多方法可以做到这一点，一个很好的起点是这里的站点点文章。

首先，将您的构造函数更改为 -

 constructor() {
        super();
        this.state = { value: 0};
        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);

    }

你也可以在onClick做同样的事情，但恕我直言，这看起来更整洁

未捕获的类型错误：无法读取 null React 的属性“setState”

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-31 05:57:22

未捕获的类型错误：无法读取 null React 的属性“setState”

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-31 05:57:22

解决方案1
1 已采纳 2017-01-31 05:57:22