时间戳

首页 > 解决方案 > 为什么 setState 不改变本地状态？

javascript - 为什么 setState 不改变本地状态？

问题描述

大家好，所以我发现了关于 React 的有趣任务，但我有点不明白如何解决它

任务： 为什么这段代码不起作用？解决这个问题。

代码：

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 1
    }
  }
  handler() {
    this.setState({count: this.state.count++})
  }
  render() {
    console.log('render')
    return (
      <div>
        <button onClick={this.handler}>Add 1</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Test />,
  document.getElementById("test"));
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="test"></div>
</body>
</html>

标签： javascriptreactjs

解决方案

您发送了错误的函数参考。应该是这样的。

<button onClick={this.handler.bind(this)}>Add 1</button>

或者

<button onClick={() => this.handler()}>Add 1</button>

推荐阅读