Saludos a todos,
Realmente no tengo experiencia en el trabajo con componentes de clase, ya que he estado usando los fáciles funcionales normales, pero recientemente comencé un proyecto que requiere el componente de clase,
Tengo la siguiente variable de estado:
this.state = { current: "City X" };Ahora, en los métodos para esta clase, tengo una función:
codeAddress(geocoder) { var marker; var data = this.state.data; marker.addListener("click", () => { // On click - The state value of 'current' should update to another value. this.setState({current: 'City Y'}); setTimeout(() => { var pointA = new google.maps.LatLng(54.976713, -1.60728); var request = { origin: pointA, destination: location, travelMode: 'DRIVING' }; directionsService.route(request, function (result, status) { if (status == 'OK') { directionsRenderer.setDirections(result); } }); }, 2000) }); } Sin embargo, este código da un error que TypeError: Cannot read properties of undefined (reading 'setState')
Enlacé todas las funciones en el constructor y probé un montón de técnicas diferentes para actualizar el valor del estado, pero aún no he podido resolverlo exactamente.
Por lo que parece, parece que tiene un problema con el alcance de this , ¿vinculó la función codeAddress dentro del constructor?
constructor( props ){ super( props ); this.codeAddress = this.codeAddress.bind(this); } Entonces, lo que está sucediendo es que JavaScript está tratando de acceder a this pero dentro de una función normal (no una función de flecha) y esto es solo un objeto sin propiedades en su caso. Con la función de vinculación, bind this que tenemos en nuestra clase a esa función, de modo que cuando llame a this , obtendrá this de la clase en sí y le permitirá acceder a todas sus propiedades.
Continúe con mi respuesta anterior. Una solución que puede hacer es agregar una función vinculante y llamarla dentro de la devolución de llamada.
const setCurrentOnMarkerClick = (function() { this.setState({current: 'City Y'}); setTimeout(() => { var pointA = new google.maps.LatLng(54.976713, -1.60728); var request = { origin: pointA, destination: location, travelMode: 'DRIVING' }; directionsService.route(request, function (result, status) { if (status == 'OK') { directionsRenderer.setDirections(result); } }); }, 2000) }); }).bind(this); marker.addListener("click", setCurrentOnMarkerClick)