如何处理 React JS 中的 this.setState 问题

Question

出于某种原因，当我按下下一步按钮时，我的 setState 值没有更新。它用于进度条，每次按下按钮时进度条增加 20。就像 value:this.state.value+20 有谁知道发生了什么事吗？任何帮助表示赞赏。谢谢！

import React, {Component} from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

class Questions extends React.Component {



     handleClick=()=>{
         alert(this.state.value);
         this.setState({
             value:this.state.value +20
         })


     }

    render() {

        this.state = {

            value:10
}

        return(
            <div>
                <div><Progress value={this.state.value} /></div>
                <div className="howMuchText">How much does it cost to build an app</div>


                <div className="nextButton">
                <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
                </div>
            </div>
        )
    }
}

export default Questions;

Answer 1

在渲染函数中改变状态是错误的。在每次更新时，状态都会发生变化。状态在反应中是不可变的。您可以在构造函数中对其进行初始化。

  constructor(props) {
        super(props);
        this.state = {

            value:10
             }
       }

Answer 2

您应该使用构造函数来初始化值。当您单击按钮时，您在代码中做错了什么它正在更新值但是 setState 重新呈现所以它再次初始化 value=10.

import React, {Component} from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value:10
        }
   }


 handleClick=()=>{
     alert(this.state.value);
     this.setState({
         value:this.state.value +20
     })


 }

render() {

    return(
        <div>
            <div><Progress value={this.state.value} /></div>
            <div className="howMuchText">How much does it cost to build an app</div>


            <div className="nextButton">
            <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
            </div>
        </div>
    )
 }
}

  export default Questions;

Answer 3

未更新的原因是您在 handleClick 函数中使用 setState 更新状态，然后在 render 函数中重置它，因此您正在撤消更新。试试这个。

将您的来源从现有的更改为：

import React, { Component } from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css"

//you've imported component so you don't need to do React.Component
class Questions extends Component {

   state = { 
     value: 10, 
   } 
     handleClick = () =>{
         alert(this.state.value);
         this.setState({
             value: this.state.value +20
         })
     }

    render() {

        return(
            <div>
                <div><Progress value={this.state.value} /></div>
                <div className="howMuchText">How much does it cost to build an app</div>


                <div className="nextButton">
                <Button onClick={this.handleClick} color="primary" size="lg">Next</Button>
                </div>
            </div>
        )
    }
}

这应该可以做到。希望这有帮助。

如何处理 React JS 中的 this.setState 问题

How to deal with this.setState issue in react JS

javascript

reactjs

react-native

bootstrap-4

reactstrap