将地理位置坐标存储为 const 变量 react答案

【问题标题】：Store geolocation coordinates as a const variable react将地理位置坐标存储为 const 变量 react
【发布时间】：2022-01-18 15:22:04
【问题描述】：

我有点卡住了。我试图将来自 componentDidMount 的用户坐标作为 const 存储在 handlesubmit 中，但是每当我尝试时都会出错。我得到的错误是： 'position' 没有被定义为 no-undef。有什么办法可以将位置存储为 const 以便我可以在 handlesubmit 部分中访问它？

谢谢代码如下

componentDidMount() {
      navigator.geolocation.getCurrentPosition(function(position ) {
        const { latitude, longitude } = position.coords;
        console.log(position )
        console.log(latitude)
        console.log(longitude)
      });
    }
    
    handleSubmit = (event) => {   

        const productName = document.querySelector('#productName') .value.trim();
        const productCondition = document.querySelector('#productCondition') .value.trim();
        const productDescription = document.querySelector('#productDescription') .value.trim();
        const productLocation = position
        console.log(productLocation )


        const data = 'productName=' + encodeURIComponent(productName) + '&productCondition=' + encodeURIComponent(productCondition) + '&productDescription=' + encodeURIComponent(productDescription);
        
        alert('A form was submitted: ' + data);
  
      fetch('api url', {
          method: 'POST',
          mode: "no-cors",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          
//          body: JSON.stringify(this.state)

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

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： reactjs geolocation constants

【解决方案1】：

const getPosition = function () {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

getPosition()
  .then(position => {
    console.log(position);
    sessionStorage.setItem('position', position);
  )
  .catch(error => {
    console.error(error);
  }

【讨论】：

嗨，刚刚尝试实现这个并收到此错误：警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在表单 (localhost:3000/main.c3a16ae847d837f591f3.hot-update.js:26:5) 控制台。 @ index.js:1
添加了额外的检查。

【解决方案2】：

很简单

const getPosition = function () {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

getPosition()
  .then(position => {
    console.log(position);
    sessionStorage.setItem('position', position);
  )
  .catch(error => {
    console.error(error);
  }

使用sessionStorage中的变量位置：

const data = sessionStorage.getItem('position');

或者你可以使用useState

【讨论】：