es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Almacena las coordenadas de geolocalización como una variable constante en React.

21 Jul, 2023 Programación

Estoy un poco atascado. Estoy tratando de almacenar las coordenadas del usuario desde el componentDidMount en el handleSubmit como una constante, sin embargo, siempre que intento hacerlo, obtengo un error. El error que estoy obteniendo es: ‘position’ no está definido (no-undef). ¿Hay alguna forma de almacenar la posición como una constante para poder acceder a ella en la parte de handleSubmit?

Gracias
El código está a continuación

componentDidMount() {
      navigator.geolocation.getCurrentPosition(function(pos ) {
        const { latitude, longitude } = pos.coords;
        console.log(pos )
        console.log(latitude)
        console.log(longitude)
      });
    }

    handleSubmit = (event) => {   

        const pName = document.querySelector('#pName') .value.trim();
        const pCondition = document.querySelector('#pCondition') .value.trim();
        const pDescription = document.querySelector('#pDescription') .value.trim();
        const pLocation = position
        console.log(pLocation )


        const post = 'pName=' + encodeURIComponent(pName) + '&pCondition=' + encodeURIComponent(pCondition) + '&pDescription=' + encodeURIComponent(pDescription);

        alert('Un formulario fue enviado: ' + post);

      fetch('api url', {
          method: 'POST',
          mode: "no-cors",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },

//          body: JSON.stringify(this.state)

           body: post
        }).then(function(response) {
          console.log(response.text)
          /*return response.json();*/
        });

      event.preventDefault();
  }
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que la variable position no está definida en la función handleSubmit, lo cual está causando el error.

    Para acceder a los valores de latitude y longitude en la función handleSubmit, podrías intentar establecerlos como variables de estado en la función componentDidMount y luego acceder a ellos en la función handleSubmit utilizando this.state.latitude y this.state.longitude.

    Aquí tienes un ejemplo de cómo podrías actualizar el código para almacenar las coordenadas del usuario en el estado:

    class MiComponente extends React.Component {
  state = {
    latitude: null,
    longitude: null
  };

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(pos => {
      const { latitude, longitude } = pos.coords;
      this.setState({ latitude, longitude });
    });
  }

  handleSubmit = event => {
    const { latitude, longitude } = this.state;
    const pName = document.querySelector('#pName').value.trim();
    const pCondition = document.querySelector('#pCondition').value.trim();
    const pDescription = document.querySelector('#pDescription').value.trim();
    const pLocation = { latitude, longitude };
    console.log(pLocation);

    const post =
      'pName=' +
      encodeURIComponent(pName) +
      '&pCondition=' +
      encodeURIComponent(pCondition) +
      '&pDescription=' +
      encodeURIComponent(pDescription);

    alert('Se envió un formulario: ' + post);

    fetch('url de la API', {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: post
    }).then(response => {
      console.log(response.text);
      /*return response.json();*/
    });

    event.preventDefault();
  };

  render() {
    return <form onsubmit="{this.handleSubmit}">...</form>;
  }
}

    ¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.

Comments are closed.