javascript - this.setState() is changing state to wrong value

Question

I am trying to calculate some values and store them in the state for a later call to my api. I wrote the code and it is putting the wrong values in.

I have tried doing one setState() with everything being calculated and "set" in the function. I have tried making variables for all three functions I was calling previously. I have split the setState() into four different calls. I have double checked the functions are returning the correct values.

State:

    state={
        stage: 0,
        ['Total Weight']: null,
        ['Calculated Yield']: null,
        ['Loan Grade']: null
    }

Function with problem:

handleUnderwritingNext = () =>{

    //....Irrelevant code above

        else if(this.state.stage === 2){
            let amount = Number(this.state['Approved Amount'].replace(/[^0-9.-]+/g,""));
            let weight = oldSocres.ScoreCardCalc(this.state)
            let grade = Grade.getGrade(weight)
            if(amount>150000 && amount <=250000){
                var yeild = Yeild.large(weight)
                console.log("Next Grade: " + grade +", Weight: "+weight + ", Yeild: "+yeild) // Next Grade: 3, Weight: 51.12, Yeild: 7.15

                this.setState({...this.state, ['Loan Grade']:grade}, ()=>{console.log("State Grade: "+this.state['Loan Grade'])}) // State Grade: 0
                this.setState({...this.state, ['Calculated Yield']:yeild})
                this.setState({...this.state, ['Total Weight']:weight})
                this.setState({...this.state, stage: this.state.stage+1})                
            }

            else if(amount>50000 && amount <=150000){
                let yeild = Yeild.mid(weight)
                console.log("Next Grade: " + grade +", Weight: "+weight + ", Yeild: "+yeild) // Next Grade: 3, Weight: 51.12, Yeild: 7.15
                this.setState({...this.state, ['Loan Grade']:grade},()=>{console.log("State Grade: "+this.state['Loan Grade'])})// State Grade: 0
                this.setState({...this.state, ['Calculated Yield']:yeild})
                this.setState({...this.state, ['Total Weight']:weight})
                this.setState({...this.state, stage: this.state.stage+1})                
            }
           else{
               let yeild = Yeild.small(weight)
               console.log("Next Grade: " + grade +", Weight: "+weight + ", Yeild: "+yeild)// Next Grade: 3, Weight: 51.12, Yeild: 7.15
               this.setState({...this.state, ['Loan Grade']:grade},()=>{console.log("State Grade: "+this.state['Loan Grade'])})// State Grade: 0
               this.setState({...this.state, ['Calculated Yield']:yeild})
               this.setState({...this.state, ['Total Weight']:weight})
                this.setState({...this.state, stage: this.state.stage+1})                
            }

        }

        else if(this.state.stage === 3){

            this.setState({...this.state, stage: this.state.stage+1})            

        }
    }

The expected result should be the state values for : 'Loan Grade' = 3, 'Total Weight' = 51.12, and 'Calculated Yeild' = 7.15. Currently it is setting the state to : 'Loan Grade' = "0", 'Total Weight' = 51.12, 'Calculated Yeild' = 0

标签： javascriptreactjs

Answer 1

就像我的评论说的那样，我会结合 setState 调用并使用 prev。

this.setState(prev => ({
  ...prev,
  ['Loan Grade']: grade,
  ['Calculated Yield']: yeild,
  ['Total Weight']:weight,
  stage: prev.stage + 1
}))

如果是我，我也会去掉对象属性名称中的空格，只显示等级、产量和重量，但这只是我的偏好。