没有 useState，无法在 useEffect 中存储 navigator.geolocation 数据

Question

我有一个问题，我想在渲染之前将 navigator.geolocation 的纬度和经度存储在 useEffect 中，使用空数组但是当我 console.log 我的结果显示时null.

这里是相关部分。

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

const [userPos, setUserPos] = useState({lat: null, long: null})

 useEffect(() => {
      navigator.geolocation.getcurrentposition((pos) =>{
          console.log(pos.coords.latitude + " " + pos.coords.longitude) // display VALUE
          setUserPos({ 
                lat: pos.coords.latitude,
                long: pos.coords.longitude,
           }) // store data in usestate
          console.log(userPos) // Display Null
     }, (err) => {
          console.log(err);
     },options);
    }
  })
 }, [])

那么为什么，当我在 useEffect 中记录 pos.coords 时，我有值，但在记录状态时却没有。有什么想法吗？

Answer 1

React 无法在中途重新渲染您的函数。而是创建一个新变量，将其传递给 set 函数并在之后使用它。请注意，重新渲染后 userPos 将在 useEffect 之外可用。因此，新变量仅在同一 useEffect 函数中对您有用。

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

const [userPos, setUserPos] = useState({lat: null, long: null})

 useEffect(() => {
      navigator.geolocation.getcurrentposition((pos) =>{
          console.log(pos.coords.latitude + " " + pos.coords.longitude) // display VALUE
          const newUserPos = { 
                lat: pos.coords.latitude,
                long: pos.coords.longitude,
           };
          setUserPos(newUserPos) // store data in usestate
          console.log(newUserPos) // Display your values
     }, (err) => {
          console.log(err);
     },options);
    }
  })
 }, [])

没有 useState，无法在 useEffect 中存储 navigator.geolocation 数据

Can't store navigator.geolocation data in useffect, with a usestate

geolocation

reactjs

react-hooks

use-effect

use-state