立即拿到setState值

有这样的场景：在做react开发的时候，使用setState时，需要拿到最新的state的值，或者打印出最新的state，但是每次打印出来的是上一次的state，而不是最新的。

可以使用如下方法：

// 封装一个公用方法：useSyncCallback.js
import { useEffect, useState, useCallback } from 'react';

// 解决useState导致的只能拿到lastRenderedState问题
const useSyncCallback = callback => {
  const [proxyState, setProxyState] = useState({ current: false });

  const Func = useCallback(() => {
    setProxyState({ current: true });
  }, [proxyState]);

  useEffect(() => {
    if (proxyState.current === true) setProxyState({ current: false });
  }, [proxyState]);

  useEffect(() => {
    proxyState.current && callback();
  });

  return Func;
};

export default useSyncCallback;

使用：

// test.js

// ...
const [isCollapeCell01, setIsCollapeCell01] = useState(false);
const [isCollapeCell02, setIsCollapeCell02] = useState(true);

setIsCollapeCell01(true);
setIsCollapeCell02(false);

// ...
// 保存当前各分组的折叠状态值
  const cells = {
    cell_01: isCollapeCell01,  
    cell_02: isCollapeCell02
  };
  // 记录当前各分组展开/折叠情况
  const saveCurrCell = () => {
    let curCellQuery = JSON.stringify(cells);
    get(  // node中封装的sdk路径，可以替换成自己使用的保存数据的方法
      '/sdk/xxx?' +
        qs.stringify({
          ...auth_info,
          cur_cell: curCellQuery,
        })
    );
  };
  const handleSaveCurrCell = useSyncCallback(() => {
    // 每次都保存的是最新的state，而不是上一个
    saveCurrCell();
  });