react函数组件useState不能同步获取state最新值问题

函数组件的useState没有提供class组件setState的同步获取最新state的方法，可以自己封装一下，核心是（1）使用useEffect监听，在state更新后触发回调（2）使用useRef存储callback

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

/**
 * 定义含回调函数的useState方法，回调中可拿到最新的state
 * @param {any} state 要设置的state值
 * @returns {Array} 和useState返回值相同[data, setData]
 */
const useSyncState = (state) => {
  const cbRef = useRef()
  const [data, setData] = useState(state);

  // 核心：依靠useEffect，在data更新后执行callback
  useEffect(() => {
    cbRef.current && cbRef.current(data)
  }, [data])

  return [
    data,
    (val, callback) => {
      cbRef.current = callback
      setData(val)
    },
  ]
}

export default useSyncState