React 状态不会在第一次提交时更新，仅在第二次提交后更新

Question

我知道 setState 处于待处理状态，因此无法立即使用。因此，我尝试按照建议使用箭头函数执行 console.log，并且在“desiredIncome”状态下它有效，但在“total”状态下无效。第二次提交后更新显示

import React, { Component } from 'react'
import styled from 'styled-components'
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { fetchHealthCare, fetchConsumerGoods, fetchEnergy, fetchFinance } from '../actions';

import './Input.css';


export class Input extends Component {

componentDidMount(){
    this.props.fetchHealthCare(this.props.id);
    this.props.fetchConsumerGoods(this.props.id);
    this.props.fetchEnergy(this.props.id);
    this.props.fetchFinance(this.props.id); 
}


constructor(props){
    super(props);
    this.state = {
        desiredIncome: 0,
        total: 0
    }
}

renderInput = formProps => {
    
    return <input 
        onChange={formProps.input.onChange}
        value={formProps.input.value}
        placeholder="  Enter your desired monthly income"  />
}
healthSum = () => (this.state.desiredIncome * 100) / this.props.healthCare.dividendYield;
consumerGoodsSum = () => (this.state.desiredIncome * 100) / this.props.consumerGoods.dividendYield;
energySum = () => (this.state.desiredIncome * 100) / this.props.energy.dividendYield;
financeSum = () => (this.state.desiredIncome * 100) / this.props.finance.dividendYield;
onSubmit = formValues => {
    
    this.setState({desiredIncome: ((formValues.sum * 12) / 4) / 4}, () => {
       console.log(this.state.desiredIncome); 
    }); 
    
    this.setState({total: this.healthSum() + this.consumerGoodsSum() + this.energySum() + this.financeSum()}, () => {
        console.log(this.state.total); 
    })
}
render(){
   
   return (
       <React.Fragment>
            <Container>
                <Display>
                    <form autoComplete="off" onSubmit={this.props.handleSubmit(this.onSubmit)} >  
                        <Field  name="sum" component={this.renderInput}   />
                    </form>
                    <List>
                        {this.check()}
                    </List>
                </Display>
            </Container>
            <h3 className="footer">Made by Tursynbek Bauyrzhan</h3>
        </React.Fragment>
    ) 
}

我该如何解决？

Answer 1

你能试试下面的代码吗

healthSum = (desiredIncome) => (desiredIncome * 100) / this.props.healthCare.dividendYield;
consumerGoodsSum = (desiredIncome) => (desiredIncome * 100) / this.props.consumerGoods.dividendYield;
energySum = (desiredIncome) => (desiredIncome * 100) / this.props.energy.dividendYield;
financeSum = (desiredIncome) => (desiredIncome * 100) / this.props.finance.dividendYield;

onSubmit = formValues => {
    const desiredIncome = ((formValues.sum * 12) / 4) / 4;
    this.setState({desiredIncome}, () => {
       console.log(this.state.desiredIncome); 
    }); 
    
    this.setState({total: this.healthSum(desiredIncome) + this.consumerGoodsSum(desiredIncome) + this.energySum(desiredIncome) + this.financeSum(desiredIncome)}, () => {
        console.log(this.state.total); 
    })
}

React 状态不会在第一次提交时更新，仅在第二次提交后更新

React state isn't updating at first submit, only after second

javascript

submit

setstate

reactjs

react-redux