Блог

Я знаю, что setState недоступен немедленно, так как он находится на рассмотрении. Поэтому я попытался утешиться.войдите в систему с функциями стрелок, как рекомендовано, и с состоянием «Желаемый результат» это сработало, но не с «итогом». Он обновляется и отображается только после второй отправки.

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

Как я могу это исправить?

Можете ли вы один раз попробовать приведенный ниже код

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