0

Tengo una función que mide distancias entre dos ubicaciones y para ello accede al State del componente. Quiero utilizar esta función a otro componente y para ello lo hago mediante props, pero aún en el segundo componente sigue accediendo al State del 1er componente en vez del 2do.

En cambio, si vuelvo a declarar la función en el segundo componente funciona correctamente, pero esto hace el código menos limpio.

COMPONENTE App.js:

Estas son las funciones que obtienen la ubicación del usuario y guardan esas coordenadas en el State:

    // Función en caso de éxito de la promesa getCurrentPosition
succes = async(pos) =>{
  // Guardado de las coordenadas en el State 
  await this.setState({
      currentUbicationLatitude: pos.coords.latitude,
      currentUbicationLongitude: pos.coords.longitude,
  })
  // Medición de las distancias y guardado en el State
  this.setState({
    kmDistance:  this.getKilometros(this.state.currentUbicationLatitude, this.state.currentUbicationLongitude, this.state.destinoDistancia.latitude, this.state.destinoDistancia.longitude)
  })
}

// Promesa que devuelve la ubicación del usuario
getDistance(succes){
      navigator.geolocation.getCurrentPosition(succes);
} 

(La función getKilometros() mide la distancia entre dos ubicaciones, su código es irrelevante para solucionar el problema)

Llamado de la función:

componentDidMount(){
  this.jsonPlaceHolder()
  this.getDistance(this.succes)
}  

Y este es el State del componente:

this.state={
destinoDistancia:{
  latitude:41.38126630740022,
  longitude:2.122733969315872
}}

Llamado del segundo componente:

<Distance distanceFunction={this.getDistance} getKilometros={this.getKilometros} succesDistance={this.succes}/>

COMPONENTE Distance.js:

En este componente se supone que la ubicación en el State state.destinoDistancia sean diferentes al de App.js.

   constructor(){
        super();
        this.state={
            destinoDistancia:{
                latitude:0,
                longitude:0
              }
    
        }
    }
    componentDidMount(){
        this.props.distanceFunction(this.props.succesDistance)
    }

En este momento, yo quiero que las funciones llamadas utilicen el State del componente Distance.js, pero en cambio siguen utilizando el State de App.js.

Como solución yo podría volver a declarar la función succes() en el componente Distance, pero esto no me parece la opción más limpia:

// Función en caso de éxito de la promesa getCurrentPosition
        succes = async(pos) =>{
        // Guardado de las coordenadas en el State 
        await this.setState({
            currentUbicationLatitude: pos.coords.latitude,
            currentUbicationLongitude: pos.coords.longitude,
        })
        // Medición de las distancias y guardado en el State
        this.setState({
          kmDistance:  this.props.getKilometros(this.state.currentUbicationLatitude, this.state.currentUbicationLongitude, this.state.destinoDistancia.latitude, this.state.destinoDistancia.longitude)
        })
      }
      
        componentDidMount(){
            this.props.distanceFunction(this.succes)
        }
1
  • ¿Porque no rediseñar el estado? Si tienes dos ubicaciones, entonces el estado puede contenerlas, un solo estado para dos ubicaciones, destinoDistancia podría ser, no se un arreglo de objetos, y solo tendrías un componente dueño de ese estado y otro componente que se encarga de modificar el estado de alguna de esas dos ubicaciones.
    – g.4
    el 15 mar. 2021 a las 20:26

1 respuesta 1

0

La solución era utilizar el método bind para ajustar la función del segundo componente al entorno.

    succes = this.props.succesDistance.bind(this); 

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.