通过useState设置的API调用结果未及时同步到useRef导致返回undefined

问题产生原因 #

• useRef 仅在组件首次渲染时使用传入的参数初始化current属性，后续组件重渲染时不会自动更新current的值。你代码中初始化prevUserState时，接口请求还未返回，userState为初始值（大概率是undefined），后续setUserState触发重渲染时没有手动更新ref，所以current一直保留初始值。
• 你现有代码中打印的是prevUserState ref对象本身，没有访问.current属性，即使ref更新了也无法拿到正确的存储值。

解决方案 #

核心逻辑是新增监听userState变化的副作用，主动同步状态到ref中，同时访问时需要取current属性：

1. 新增同步用的useEffect，每次userState变化时更新ref的值：

// 保存最新的userState到ref
useEffect(() => {
  prevUserState.current = userState
}, [userState])

如果你的需求是存储上一次渲染的userState值，可以用副作用清理函数实现：

// 保存前一次的userState到ref
useEffect(() => {
  return () => {
    prevUserState.current = userState
  }
}, [userState])

2. 调整点击事件中的取值逻辑，访问ref的current属性：

<Button onClick={ ()=>{console.log(prevUserState.current)}}>prevUserState</Button>

修改后完整示例代码 #

function YourComponent() {
  // 初始值可根据实际业务替换
  const [userState, setUserState] = useState()
  const prevUserState = useRef(userState)

  useEffect(()=>{
    global.api.getProviderDoctorByID(user._id, user.default_org).then((res)=>{
      setUserState(res.data.data.data)
    })
  },[])

  // 同步最新状态到ref
  useEffect(() => {
    prevUserState.current = userState
  }, [userState])

  return(
    <Button onClick={ ()=>{console.log(prevUserState.current)}}>prevUserState</Button>
  )
}

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