状态不更新React中的组件

Question

我试图创建一个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>);
      }
    }

Answer 1

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

第二： setState为async，因此更新不会立即可见，因此您需要在setState回调中记录该值。查看this answer了解详情

第三：当您根据前一个状态更新当前状态时，最好使用setState提供的更新程序函数语法。在when to use Updater function with 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);
    });

  }