0

Estoy utilizando unas funciones que se encargan de medir la distancia entre dos coordenadas. Por cuestiones del proyecto estas funciones se encuentran en un componente padre que por medio de props llevo al componente hijo.

El problema es que, aunque haya utilizado el metodo bind() para reasignar el contexto del operador this al componente hijo, las funciones siguen trabajando con el contexto del componente padre y su respectivo estado. ¿Cuál es el error?

Componente padre

class App extends React.Component{
    // 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);
    } 
}

JSX del componente padre (Distance es el componente hijo)

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

Componente hijo

export default class Distance extends React.Component{
    succes = this.props.succesDistance.bind(this); 
    componentDidMount(){
        this.props.distanceFunction(this.succes)
    }
}

Como ven, utilizo el método bind() para ajustar el operador 'this' al contexto del componente hijo. Pero este sigue utilizando el contexto del componente padre.

0

1 respuesta 1

1

Las funciones flecha son funciones especiales que se introdujeron en ES6 y no tienen "noción" del this. Sino que el this hacen referencia al contexto(scope) en el que están definidas.

Deberías usar métodos de clase para añadir el bind.

Tal como dice la documentación no son apropiadas para el uso del bind, call, apply.

class App extends React.Component {
    // Función en caso de éxito de la promesa getCurrentPosition
    async succes(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);
    } 
}

Te recomiendo sacar la lógica de calcular de las distancias en un objeto o función externa. Así "desacoplas" el cálculo de la distancia del componente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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