如何在react JS中处理this.setState问题

3 回答

• 0

  这不是更新的原因是因为您在 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>
          )
      }
  }
  

  这应该做到这一点 . 希望这可以帮助 .

  回复于 2024-04-20T09:03:44+08:00
• 0

  改变渲染函数内的状态是错误的 . 每次更新，状态都会发生变化 . 国家在做出反应时是不变的 . 您可以在构造函数中初始化它 .

  constructor(props) {
          super(props);
          this.state = {
  
              value:10
               }
         }
  

  回复于 2024-04-20T09:03:44+08:00
• 0

  您应该使用构造函数来初始化值 . 当您单击按钮时，您在代码中做错了什么，它正在更新值，但是setState重新渲染，所以再次初始化值= 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;
  

  回复于 2024-04-20T09:03:44+08:00