reactjs中如何处理this.setState问题

Posted 2023-03-23

【中文标题】reactjs中如何处理this.setState问题

【英文标题】：How to deal with this.setState issue in react JS

【发布时间】：2019-05-10 16:16:57

【问题描述】：

由于某种原因，当我按下下一个按钮时，我的 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;

【问题讨论】：

为什么你的渲染中有this.state = value: 10？这是你的问题的原因，而不是你应该做的事情。

这只是默认设置。抱歉，我对此很陌生

在此处提问之前，请花点时间阅读一些 React 初学者教程。这种类型的问题对其他人并没有真正的帮助，而且很容易调试（类似于错字）。解释一下：这不是你在 React 中的默认状态。您必须在构造函数中或使用类字段声明快捷方式来执行此操作。通过在渲染中这样做，value 将始终为 10。

我认为这个问题不应该被否决，它会阻止人们提问:( kenny335 可能已经完成了教程，但没有一个人解释过这个......但我是一个堆栈溢出的新手，所以也许我错了:)

【参考方案1】：

之所以没有更新，是因为您在 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>
        )
    

应该这样做。希望这会有所帮助。

【讨论】：

np 快乐编码 :)

【参考方案2】：

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

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

            value:10
             
       

【参考方案3】：

您应该使用构造函数来初始化值。当您单击按钮时，您在代码中做错了什么，它正在更新值，但 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;

【讨论】：

您不再需要构造函数...代码仍将使用它执行，但您不需要它，节省您的手指打字时间：)

@BensSteves 我知道，但这是在反应中初始化变量的正确方法，当您将拥有更多状态时，如果没有构造函数，您将很难管理状态。

我不确定我是否完全同意这一点。想象一下，您有五个方法必须不断地绑定到您的组件，只是在您使用构造函数路由之前。我认为你可以在没有的情况下管理状态。只是我的观点。我确实认为你的方式对初学者有好处。让他们有更好的理解。另外，我认为您的方式还有更多文档:)

我同意，但我说的是代码质量，当他们的代码出现错误时，开发人员很容易理解问题。

是的，我同意你的看法