react 异步回调获取的state不一致,获取不到最新值的解决方法

组件内部的任何函数，包括事件处理函数和 effect，都是从它被创建的那次渲染中被「看到」的。

已经碰到两次这个问题了, 都是在一个上传组件上.

就是在需要在上传的途中添加取消的功能.取消操作会触发一个回调函数,然后我在这个回调函数里面判断父组件传来的isUploading,结果发现,这个回调函数中获取到的isUploading,和useEffect监听到的值不一致.

说明回调函数中的不是最新值.

第一次碰到类似问题的时候,我用useRef解决了,结果第二次又碰到了,这次我决定网上搜索一下,结果也没搜到其他的方法.

也就是说,如果你要在执行时间长的回调函数中(如果在开头就使用,那就没有这个同步的问题)使用一个值,最好是用useRef,

所以我把这个常用的功能封装了一个hooks

/**
 * react中异步回调中的state,是创建的那次渲染中看到的,不是最新的state
 * 这个hook使用useRef保存那个state,确保获取最新的state
 * @param state
 * @returns
 */
export function useStateRef(state: any) {
  const stateRef = useRef()
  useEffect(() => {
    stateRef.current = state
    return () => {}
  }, [state])
  return stateRef
}

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】