设置pinnedNewsID状态后打印值仍为undefined的问题求助

核心原因：React状态更新的异步性 #

你遇到的undefined问题，本质是React的状态更新是异步批量处理的。调用setpinnedNewsID(data.pinnedNewsId)后，pinnedNewsID并不会立刻更新为新值——React会把状态更新加入队列，等当前代码执行完后再统一处理。所以在getCurrentlyPinned().then()里打印时，状态还没完成更新，输出的是初始的undefined。

另外还要排查一个潜在问题：检查Firestore文档admin_control/currently_Pinned里的字段名是否和代码中的pinnedNewsId完全一致（大小写、拼写都不能错），如果字段名不匹配，data.pinnedNewsId本身就是undefined，自然会导致状态值为undefined。

解决方案1：直接返回获取到的ID（推荐） #

修改getCurrentlyPinned函数，让它返回获取到的ID，这样在then回调里直接用返回值就能拿到正确结果，不用依赖异步更新的状态：

const getCurrentlyPinned = async() =>{
  setLoader(true)
  // 去掉.then，用await直接接收快照，代码更简洁
  const snapshot = await firestore()
    .collection('admin_control')
    .doc('currently_Pinned')
    .get()
  const data = snapshot.data();
  const pinnedId = data?.pinnedNewsId; // 可选链避免data为null时报错
  setpinnedNewsID(pinnedId);
  return pinnedId; // 返回获取到的ID
}

useEffect(() => {
  getCurrentlyPinned().then((pinnedId)=>{
     console.log(pinnedId) // 这里打印的是刚获取到的真实ID
  })
}, [])

解决方案2：监听状态变化打印 #

如果必须依赖状态值，添加一个监听pinnedNewsID的useEffect，当状态更新时自动触发打印：

useEffect(() => {
  getCurrentlyPinned()
}, [])

// 监听pinnedNewsID的变化
useEffect(() => {
  if(pinnedNewsID !== undefined){
    console.log(pinnedNewsID) // 状态更新后才会执行这里的打印
  }
}, [pinnedNewsID])

内容的提问来源于stack exchange，提问作者Dark shit