Question

我正在尝试计算一些值并将其存储在状态中，以供以后调用我的api。我写了代码，它输入了错误的值。

我尝试执行一个setState（），计算所有内容并在函数中“设置”。我尝试为之前调用的所有三个函数制作变量。我已经将setState（）分为四个不同的调用。我已经仔细检查了函数是否返回正确的值。

状态：

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

有问题的功能

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

        }
    }

预期结果应为的状态值： 'Loan Grade' = 3, 'Total Weight' = 51.12, and 'Calculated Yeild' = 7.15。当前，它将状态设置为：'Loan Grade' = "0", 'Total Weight' = 51.12, 'Calculated Yeild' = 0

Answer 1

根据the docs：

将setState()视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

this.setState不会立即更新状态，因此当您连续拨打多个电话时，this.state包含旧状态。尝试使用this.setState的功能形式，“附加”到该状态的最新版本。

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

或者，只需将它们全部合并为一个调用即可更新状态：

this.setState({
    ...state,
    ['Loan Grade']: grade,
    ['Calculated Yield']: yeild,
    stage: this.state.stage+1
});

Answer 2

就像我的评论所说，我将结合setState调用并使用prev。

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

如果是我，我还将在对象属性名称中删除空格，只保留等级，屈服和重量，但这只是我的偏爱。

this.setState（）将状态更改为错误的值

2 个答案: