React自定义Hook状态未更新：首次打印为空对象的原因及修复方案

嘿，这个问题我太熟悉了，咱们一步步拆解清楚：

核心原因 #

1. React挂载阶段的执行顺序逻辑
   当组件首次挂载时，React会先同步跑完所有组件和Hook的初始化代码：

   • useGPS初始化时，useState({})先创建了一个空对象状态，随即返回这个状态组成的数组[{}]。
   • Foo组件拿到这个初始数组后（如果没解构的话，location就是这个数组；要是解构了，location就是空对象），接下来会执行自身的useEffect。
   • 注意：挂载阶段的useEffect是按执行顺序排队的——Foo的useEffect（空依赖）会先触发，此时它捕获的是location的初始值（空对象或包含空对象的数组）。
   • 之后才轮到useGPS里的useEffect执行，更新gps状态为{a:1}，触发Foo重新渲染，但Foo的useEffect因为依赖是空数组，不会再次执行，所以你看到的始终是初始的空对象。

2. 额外的小疏漏：Hook返回值的解构错误
   你的useGPS返回的是状态数组[gps]，但Foo里直接用const location = useGPS()，这会导致location是一个数组（比如初始是[{}]），而不是你想要的GPS对象。正确的做法应该是解构这个数组：const [location] = useGPS()。

修复方案 #

方案1：让Foo的useEffect监听location变化 #

修改Foo组件的useEffect依赖数组，加入location，这样当location更新时，useEffect会重新执行，打印最新的值：

const Foo = () => { 
  // 先修复解构问题
  const [location] = useGPS() 
  useEffect(() => { 
    console.log(location); 
  }, [location]) // 这里添加location作为依赖
  return ( <div>1</div> ) 
}

方案2：优化useGPS的状态初始化（非异步场景） #

如果你的GPS数据不需要异步获取（比如示例里的模拟值），可以直接在useState里初始化，跳过useEffect，这样初始状态就是正确的值：

const useGPS = () => { 
  // 直接初始化状态，不需要useEffect
  const [gps, setGps] = useState({ a: 1 }) 
  return [gps] 
}

方案3：适配真实异步GPS场景（扩展） #

如果实际是调用浏览器的navigator.geolocation获取GPS（异步操作），可以在useGPS里处理加载状态，同时让Foo组件能监听状态变化：

const useGPS = () => { 
  const [gps, setGps] = useState({}) 
  const [loading, setLoading] = useState(true)

  useEffect(() => { 
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setGps({
          lat: position.coords.latitude,
          lng: position.coords.longitude
        })
        setLoading(false)
      },
      (error) => {
        console.error(error)
        setLoading(false)
      }
    )
  }, []) 

  return [gps, loading] 
}

// Foo组件使用
const Foo = () => { 
  const [location, loading] = useGPS() 
  useEffect(() => { 
    if (!loading) {
      console.log(location); 
    }
  }, [location, loading]) 

  return ( <div>{loading ? '加载中...' : '已获取位置'}</div> ) 
}

内容的提问来源于stack exchange，提问作者Phụng Ngọc Sơn