我在使用 Route.useSearch() 派生状态、并使用 Route.useNavigate 更新状态时，发现更新状态会有延迟。有没有关于如何以最优方式实现这一点的指导？到目前为止，我将状态保存在一个 useState 中，并使用一个 useEffect 来同步状态。

function useOptimisticTab() {
    const { tab } = Route.useSearch();
    const navigate = Route.useNavigate();
    const [optimisticTab, setOptimisticTab] = useState(tab);

    useEffect(() => {
        setOptimisticTab(tab);
    }, [tab]);

    const handleSetOptimisticTab = (value: TabOptions) => {
        setOptimisticTab(value);
        navigate({
            search: (prev) => ({
                ...prev,
                tab: value,
            }),
        });
    };

    return [optimisticTab, handleSetOptimisticTab] as const;
}

解决方案

延迟之所以发生，是因为 Route.useSearch() 会从URL获取当前的查询参数，而 Route.useNavigate() 会异步地更新URL。当你同时更新本地状态和URL时，React总会存在一个两者不匹配的时刻。正因如此，你的乐观状态会立即更新，但URL的更新会落后。

optimisticTab在 useState

tab来自 useSearch()

当你拥有两个真相来源时，你就会看到延迟或闪烁。

最简单的修复方法是彻底移除本地状态，让URL成为唯一的真相来源。React Router的设计初衷是让URL可以充当你的状态。

例如：

function useTab() { 

    const { tab } = Route.useSearch(); 

    const navigate = Route.useNavigate();

    const setTab = (value) =\> { 

        navigate({ 

            search: (prev) =\> ({ 

            ...prev, 

            tab: value, 

            }), 

        }); 

    };

    return \[tab, setTab\]; 

}

这就消除了延迟，因为你不再同步两种不同的状态。