Javascript 如何在react JS中处理此.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;

import React，{Component}来自“React”；
从“reactstrap”导入{按钮，进度}；
导入“./src/Questions.css”
类问题扩展了React.Component{
handleClick=（）=>{
警报（this.state.value）；
这是我的国家({
值：this.state.value+20
})
}
render（）{
此.state={
数值：10
}
返回(
构建一个应用程序需要多少钱
下一个
)
}
}
导出默认问题；

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

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

            value:10
             }
       }

---

您应该使用构造函数来初始化该值。当您单击按钮时，代码中的错误是什么？它正在更新值，但设置state重新渲染，使其再次初始化值=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;

import React，{Component}来自“React”；
从“reactstrap”导入{按钮，进度}；
导入“./src/Questions.css”
类问题扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={值：10
}
}
handleClick=（）=>{
警报（this.state.value）；
这是我的国家({
值：this.state.value+20
})
}
render（）{
返回(
构建一个应用程序需要多少钱
下一个
)
}
}
导出默认问题；

不更新的原因是，您正在使用

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>
        )
    }
}

import React，{Component}来自“React”；
从“reactstrap”导入{按钮，进度}；
导入“./src/Questions.css”
//您已经导入了组件，所以不需要执行React.component
类问题扩展组件{
状态={
数值：10，
} 
handleClick=（）=>{
警报（this.state.value）；
这是我的国家({
值：this.state.value+20
})
}
render（）{
返回(
构建一个应用程序需要多少钱
下一个
)
}
}

---

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

为什么渲染中有

this.state={value:10}

？这是你的问题的原因，而不是你应该做的事情。那只是默认情况。对不起，我对这个很陌生。在这里提问之前，请花点时间阅读一些初学者反应教程。这种类型的问题对其他人没有帮助，而且很容易调试（类似于打字错误）。解释：这不是您在React中的默认状态。您必须在构造函数中或通过使用类字段声明快捷方式执行此操作。在render中这样做，

值将始终为10。我认为这个问题不应该被否决，因为它会阻止人们提问：（kenny335可能做过教程，但没有人解释过这一点……但我是堆栈溢出的新手，所以可能我错了：）您不再需要构造函数…代码仍将使用它执行，但您不需要它节省您的手指键入：）@BensSteves我知道，但这是在react中初始化变量的正确方法，当您将有更多的状态数时，您将很难在没有构造函数的情况下管理状态。我不确定是否完全同意那个假设您有五种方法，您必须使用构造函数路由不断地绑定到组件。我认为你可以管理好这个国家，也不必担心。只是我的意见。我确实认为你的方法对初学者很好。让他们更好地理解。此外，我认为还有更多的文档可供您参考：）我同意，但我谈论的是代码质量，当开发人员的代码中出现错误时，他们将很容易理解问题。啊，是的，我同意younp快乐编码：）