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