React-Table的useMemo列定义内无法读取state状态变量问题

问题根因 #

你使用React.useMemo定义列配置时，未将依赖的回调函数加入依赖数组，导致列配置仅在组件首次渲染时生成一次，内部Cell的点击事件绑定的是首次渲染时的setVars函数闭包，该闭包捕获的approverList永远是初始值null，后续state更新不会刷新这个旧闭包的变量快照。

修复方案 #

方案1：补全依赖项（推荐）

首先用React.useCallback包裹setVars，保证仅依赖变更时才更新函数引用：

const [approverList, setApproverList] = useState(null);

const setVars = React.useCallback((values, mode) => {
    if (approverList != null) {
        // 原有业务逻辑
    }
}, [approverList]); // 把函数内用到的所有state都加入依赖

再把setVars加入columns的useMemo依赖数组，触发列配置的自动更新：

const columns = React.useMemo(
    () => [
        // 原有列配置完全不变
    ],
[setVars]) // 新增setVars作为依赖

方案2：useRef绕开闭包限制（适用列配置复杂的场景）

如果列配置重计算成本较高，不想频繁更新，可以通过ref存储可变值规避闭包问题：

const [approverList, setApproverList] = useState(null);
const approverListRef = useRef(approverList);

// 同步state最新值到ref
useEffect(() => {
    approverListRef.current = approverList;
}, [approverList])

function setVars(values, mode) {
    // 从ref读取最新值，不受闭包快照限制
    if (approverListRef.current != null) {
        // 原有业务逻辑
    }
}

该方案不需要修改columns的依赖配置，原有列代码可以保持不变。

内容的提问来源于stack exchange，提问作者gene b.