React本机useState在watchPositionAsync中不起作用

是因为watchPositionAsync是一个异步函数，它在组件渲染期间可能会多次调用。由于useState是一个同步函数，它在组件渲染期间只会执行一次，因此无法在watchPositionAsync中实时更新状态。

解决这个问题的方法是使用React的useEffect钩子函数来监听位置的变化，并在位置变化时更新状态。具体步骤如下：

1. 在组件中引入useState和useEffect钩子函数：

import React, { useState, useEffect } from 'react';

1. 在组件中定义一个状态变量来存储位置信息：

const [position, setPosition] = useState(null);

1. 使用useEffect钩子函数来监听位置的变化，并在位置变化时更新状态：

useEffect(() => {
  const watchId = navigator.geolocation.watchPosition(
    (position) => {
      setPosition(position);
    },
    (error) => {
      console.log(error);
    }
  );

  return () => {
    navigator.geolocation.clearWatch(watchId);
  };
}, []);

在上述代码中，useEffect的第一个参数是一个回调函数，它会在组件渲染后执行。在这个回调函数中，我们使用watchPosition方法来监听位置的变化，并在位置变化时调用setPosition来更新状态。

useEffect的第二个参数是一个空数组，表示只在组件挂载和卸载时执行一次。这样可以避免重复监听位置的变化。

1. 在组件中使用position状态变量来展示位置信息：

return (
  <div>
    Latitude: {position && position.coords.latitude}
    Longitude: {position && position.coords.longitude}
  </div>
);

在上述代码中，我们使用了短路运算符来判断position是否存在，如果存在则展示位置信息。

推荐的腾讯云相关产品：腾讯云云函数（Serverless Cloud Function），它是一种无服务器计算服务，可以帮助开发者更轻松地构建和运行云端应用程序。腾讯云云函数支持多种编程语言，包括JavaScript，可以方便地与React结合使用。您可以通过以下链接了解更多关于腾讯云云函数的信息：腾讯云云函数

请注意，以上答案仅供参考，具体实现方式可能因项目需求和技术栈而异。