React函数组件useState怎么获取最新的state

Question

函数组件表格拖拽排序，每次改变表格顺序希望把最新的flowsInfo传给后端，但是拿到的flowsInfo是上一次的，怎么拿到最新的flowsInfo？(类似与setState第二个参数)

const [flowsInfo, setFlowsInfo] = useState([] as any);
const moveRow = useCallback((dragIndex, hoverIndex) => {
        const dragRow = flowsInfo[dragIndex];
        setFlowsInfo(
            update(flowsInfo, {
                $splice: [
                    [dragIndex, 1],
                    [hoverIndex, 0, dragRow],
                ],
            }),
        );
        //把最新的flowsInfo传给后端
        putFlowsRequest.run(flowsInfo);
    }, [flowsInfo]);

Answer 1

useEffect 依赖项是 flowsInfo 当发生变化时传给后端

Answer 2

“把最新的flowsInfo传给后端” 这段逻辑写到useEffect中。
useEffect第二个参数就是依赖项，表示依赖flowsInfo 的变化会触发函数。

const moveRow = useCallback((dragIndex, hoverIndex) => {
  //...
});


useEffect(() => {
  putFlowsRequest.run(flowsInfo);
}, [flowsInfo])

Answer 3

useRef 手动保存 或者从 setState 函数回调里拿

Answer 4

题主是否需要使用flowsInfo驱动组件re-render，实现界面UI刷新?

如果不需要的话，直接用 useRef 存储就好

const flowsInfo = useRef(Object.create(null)).current

moveRow可以改成普通函数，函数体中直接将index信息存储到flowsInfo中即可

如果需要使用flowsInfo 驱动视图更新

引入纯函数设计思想，函数设计编写时，功能要单一明确，moveRow仅用来当拖拽发生改变时更新flowsInfo，将与后端通信的逻辑剥离到useEffect，与后端通信属于副作用。

//...
const moveRow = useCallback((dragIndex, hoverIndex) => {
        const dragRow = flowsInfo[dragIndex];
        setFlowsInfo(
            update(flowsInfo, {
                $splice: [
                    [dragIndex, 1],
                    [hoverIndex, 0, dragRow],
                ],
            }),
        );
    }, [flowsInfo])
// 处理副作用    
useEffect(() => {
  putFlowsRequest.run(flowsInfo);
}, [flowsInfo])