使用useEffect手动排序React-Table失效问题排查

核心问题1：状态更新异步导致调用fetchData时拿到旧值 #

React的useState更新是异步的，在useEffect里调用setFetchColumn和setFetchSortDirection后，立刻访问fetchColumn和fetchSortDirection拿到的还是更新前的旧值，这就是首次点击时两个状态为空，但set方法明明执行了的原因。

核心问题2：条件判断逻辑错误导致排序方向异常 #

你的代码逻辑存在分支覆盖问题：

if (state.sortBy[0].desc)
    setFetchSortDirection('Descending');

if (!state.sortBy[0].desc)
    setFetchSortDirection('Ascending');
else
    setFetchSortDirection('');

当state.sortBy[0].desc为true时，第一个if会把方向设为Descending，但紧接着第二个if的条件不成立，会走else分支把方向又设为空；当desc为false时，第二个if设为Ascending，但第一个if不执行。这种混乱的分支逻辑直接导致排序方向不符合预期。

修复后的代码 #

const [fetchColumn, setFetchColumn] = useState('');
const [fetchSortDirection, setFetchSortDirection] = useState('');
...

useEffect(() => {
    if (state.sortBy.length > 0) {
        // 直接从当前sortBy中提取计算目标值
        const currentDirection = state.sortBy[0].desc ? 'Descending' : 'Ascending';
        const currentColumn = state.sortBy[0].id;
        
        // 更新状态
        setFetchSortDirection(currentDirection);
        setFetchColumn(currentColumn);
        
        // 用计算好的变量调用接口，避免异步状态延迟问题
        props.fetchData(currentColumn, currentDirection);
        
        console.log(currentDirection);
    } else {
        // 无排序条件时重置状态
        setFetchSortDirection('');
        setFetchColumn('');
        console.log("nothing");
    }
}, [state.sortBy]);

修复说明 #

1. 解决异步状态问题：直接从state.sortBy中提取计算列名和排序方向，用这些即时值调用fetchData，无需等待useState更新完成（useState更新是异步的，本轮渲染无法立刻拿到新值）。
2. 修正逻辑错误：用三元表达式一次性确定排序方向，避免多分支覆盖的问题，逻辑更简洁可靠。
3. 补充边界处理：当state.sortBy为空时重置状态，保证逻辑完整性。

内容的提问来源于stack exchange，提问作者John Kinane