this.setState() 将 state 更改为错误值

Question

我正在尝试计算一些值并将它们存储在 state 中，以便稍后调用我的 api。 我编写了代码，它输入了错误的值。

我尝试过在 function 中计算和“设置”所有内容的 setState()。 我已经尝试为我之前调用的所有三个函数创建变量。 我已将 setState() 拆分为四个不同的调用。 我已经仔细检查了函数是否返回正确的值。

State：

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

Function 有问题：

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

        }
    }

预期结果应该是 state 值： 'Loan Grade' = 3, 'Total Weight' = 51.12, and 'Calculated Yeild' = 7.15 。 目前它将 state 设置为： 'Loan Grade' = "0", 'Total Weight' = 51.12, 'Calculated Yeild' = 0

Answer 1

在连续多次调用setState时（通常不是一个好主意），请确保使用updater版本，它为您提供当前 state 的快照。 这是由于this的可变性，您需要closure以确保您访问的state是正确的

this.setState(prev => ({foo : prev.foo + 1}))
this.setState(prev => ({bar : prev.bar + 1}))

在这里，这个人自己更好地解释了这一点。

Answer 2

根据文档：

将setState()视为更新组件的请求而不是立即命令。 为了更好地感知性能，React 可能会延迟它，然后一次更新多个组件。 React 不保证立即应用 state 更改。

this.setState不会立即更新 state，因此当您连续多次调用时， this.state包含旧的 state。 尝试使用 this.setState 的函数形式“附加”到最新版本的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})

或者，只需将它们全部组合到一个调用中即可更新 state：

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

Answer 3

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

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

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