Updates the states but the second object always shows it empty

Navigation
1

I'm trying to develop a web app using React Js , but I've run into a problem, which I do not understand why it happens.

What is enclosed in the red colored rectangle is a component, and what is enclosed with the green color is another. I perform the following procedure, in order to execute a function.

The ideal is to be able to obtain the information, both from the request that I make to google maps , sending an address, or entering by keyboard the other information in the other component .

Order

  • Obtain the address and geo position, after entering the established format
  • If correct, I change a state, from false to true
  • As the state belonging to the other component has not been altered, nothing still happens
  • I write the values in the text boxes on the right
  • If they comply with the established, then change the status from false to true
  • Because both states are now true , the function is executed, but the data of the object that relates to the text boxes on the right, which update, are always empty.

    • Parent component code 

    import React, { Component } from 'react';
import { render } from 'react-dom';
import AddressInput from './components/address.js';
import InputDataPerson from './components/dataPersonHouse.js';
import TableConsumeInformation from './components/tableInformation.js';

import './styles/main.css';

class App extends Component{

    constructor(){

        super();
        this.state = {
            geoInfo:{                
                Latitude:"",
                Longitude:""
            },
            dataInfoHouse:{
                year:"",
                anguloInclinacion: "",
                potenciaPaneles: "",
                diasNoSoleados: ""
            },
            activate:{
                adress: false,
                dataHouse: false
            }
        };

        this.updateGeoInfo = this.updateGeoInfo.bind(this);
        this.updateInfoHouse = this.updateInfoHouse.bind(this);
    }

    render(){
        return(
            <div>                
                <div className="Contenedor">  
                    <div className="Espacio">
                        <AddressInput newInfo={this.updateGeoInfo}/>
                    </div>
                    <div className="Espacio">
                        <InputDataPerson newInfo={this.updateInfoHouse}/>
                    </div>                                 
                </div>
                <div>
                    <TableConsumeInformation ref={instance => { this.tableInformation = instance; }}/>
                </div>
            </div>
        )
    }

    updateGeoInfo(geoData){

        let geoInfo = Object.assign({}, this.state.geoInfo);
        let activate = Object.assign({}, this.state.activate);
        let infoNASARequest = {
            dataHome:"",
            dataGeo:""
        };

        geoInfo.Latitude = geoData.ltd;
        geoInfo.Longitude = geoData.lng;

        this.setState({geoInfo});

        activate.adress = true; 
        this.setState({activate}); 

        if(activate.adress == true && activate.dataHouse == true){  
            console.log("ambas posicion geo");
            this.sendInfoNasaRequest();
        }

    }

    updateInfoHouse(dataHouse){

        let infoHouse = Object.assign({}, this.state.dataInfoHouse);
        let activate = Object.assign({}, this.state.activate);
        let infoNASARequest = {
            dataHome:"",
            dataGeo:""
        };

        infoHouse.year = dataHouse.year;
        infoHouse.potenciaPaneles = dataHouse.potenciaPanel;
        infoHouse.diasNoSoleados = dataHouse.diasNoSoleados;
        infoHouse.anguloInclinacion = dataHouse.anguloInclinacion;

        this.setState({infoHouse});

        activate.dataHouse = true;
        this.setState({activate});        

        if(activate.adress == true && activate.dataHouse == true){
            console.log("ambas en informacion de la casa");
            this.sendInfoNasaRequest();
        }

    }   

    sendInfoNasaRequest(){
        let infoNASARequest = {
            dataGeo:this.state.geoInfo,
            dataHome:this.state.dataInfoHouse                
        };
        this.tableInformation.CalculateRadiation(infoNASARequest);
    }

}

export default App;

    Note: The values of the object I keep in dataHome are always empty.

        
    asked by Pedro Miguel Pimienta Morales 19.04.2018 в 05:50
    source

    1 answer

    1

    the setState () function is asyncronica, if you want something to happen after modifying the state, you can pass it a callback, like this: this.setState ({}, () = > {... here ...})

        
    answered by 15.05.2018 в 16:33
    connection to java with mysql ajax request sends POST data but is not received