Reactjs React中组件的状态未更新

我正在尝试制作一个tapper组件，每当用户点击按钮时，组件内的数字就会上升一

tapper组件从本地json文件获取初始值。但是，当敲击器被按下时，它会启动onClick功能，但不会更新状态，因此数字不会上升！我是个新手，所以我不知道我是否对这个问题处理不当

我未来的目的是让按钮更新json值，以便将来访问该页面的任何人都可以点击它，使数字上升

import React, {Component} from 'react';
import {Icon, Label} from 'semantic-ui-react';
import tapperValue from './tappervalue.json';

    export default class TapperOutput extends Component {

      constructor() {
        super();

        this.state = {
          tapperValue: tapperValue.tapperValue
        }
      }

      handleClick = () => {
        console.log('Before the conversion ' + this.state.tapperValue);
        const taps = this.state.tapperValue + 1;
        this.setState = ({tapperValue: taps});
        console.log('After the conversion ' + this.state.tapperValue);
      }

      render() {

        return (
        <Label onClick={this.handleClick}>
          <Icon name='hand paper'/> {this.state.tapperValue}
        </Label>);
      }
    }

import React，{Component}来自'React'；
从“语义ui反应”导入{Icon，Label}；
从“./tapperValue.json”导入tapperValue；
导出默认类TapperOutput扩展组件{
构造函数（）{
超级（）；
此.state={
tapperValue:tapperValue.tapperValue
}
}
handleClick=（）=>{
console.log（'转换前'+this.state.tapperValue）；
const taps=this.state.tapperValue+1；
this.setState=（{tapperValue:taps}）；
console.log（'转换后'+this.state.tapperValue）；
}
render（）{
返回(
{this.state.tapperValue}
);
}
}

首先设置状态是一个函数，不需要赋值运算符

Second:

setState

是

async

，因此更新不会立即可见，因此您需要将该值记录在setState回调中。查看更多详细信息

第三个：基于前一个状态更新当前状态时，最好使用setState提供的更新程序函数语法。请核对这个答案

简单地写

  handleClick = () => {
    console.log('Before the conversion ' + this.state.tapperValue);
    this.setState(prevState => ({tapperValue: prevState.tapperValue + 1}), () => {
        console.log('After the conversion ' + this.state.tapperValue);
    });

  }

---

首先setState是一个函数，不需要赋值运算符

Second:

setState

是

async

，因此更新不会立即可见，因此您需要将该值记录在setState回调中。查看更多详细信息

第三个：基于前一个状态更新当前状态时，最好使用setState提供的更新程序函数语法。请核对这个答案

简单地写

  handleClick = () => {
    console.log('Before the conversion ' + this.state.tapperValue);
    this.setState(prevState => ({tapperValue: prevState.tapperValue + 1}), () => {
        console.log('After the conversion ' + this.state.tapperValue);
    });

  }

---

顺便说一句，我给了另一个答案一本非常有趣的书，它澄清了我关于更新状态的许多问题！你能澄清一下你最后的评论吗？我不明白，我刚才说的是我读了“何时将更新程序函数与setState一起使用”的问题/答案，它澄清了我对state及其工作原理的许多疑问！顺便说一句，我给了另一个答案一本非常有趣的书，它澄清了我关于更新状态的许多问题！你能澄清一下你最后的评论吗？我不明白，我刚才说的是我读了“何时将更新程序函数与setState一起使用”的问题/答案，它澄清了我对state及其工作原理的许多疑问！