Javascript 发送后，使用空白数据和ContextProvider中的新数据对useReducer状态更新作出反应（导致2次呈现）

我正在使用一个包含useReducer的上下文提供程序

const Project\u settings\u context=createContext（）
...
导出常量设置提供程序：FC=（{children}）=>{
const[loading，setLoading]=useState（true）；
const[settingData，dispatch]=useReducer（减速机，初始状态）；
...
常量值={
设置数据，
派遣，
};
返回(
{儿童}
);
}
export const useSetting=（）=>返回useContext（设置\u上下文）；

我正在调度一个DataIn-useEffect返回方法（其目的是在切换制表符时以及组件卸载时保存数据）

useffect（（）=>{
return（）=>{
const currentData=getValues（）；
派遣({
类型：设置页面，
数据：currentData[设置]，
});
};
}, []);

在最后一个选项卡（有点像显示全部）中，我正在访问useEffect中的数据

const FinalTab=（）=>{
const{settingData}=useSetting（）
useffect（（）=>{
console.log（设置数据）
//！！！对于我切换的最后一个选项卡（最后一次调度调用），上面这一行返回{}或空白
}, [])
...
}

我的目标是在显示最后一个选项卡时向服务器发送请求，但它不能按预期工作，当我重新加载页面时，它可以正常工作

另外，当我使用[settingData]作为第二个参数记录useEffect数据时，它会在第二次加载时显示数据，但我无法使用它&检查是否存在所有数据

我是否可以检查数据是否已完成加载/应用状态更新？ 或任何获得即时数据的解决方法

---

codesandbox:

使用空的依赖项列表意味着它将只加载一次。每次更改设置数据时，添加[settingData]将调用useEffect

const FinalTab = () => {
    const { settingData } = useSetting()

    useEffect(() => {
        console.log(settingData) 
// !!! this above line returns {} or blank for the last tab I switched ( last dispatch call )
    }, [settingData])

   ...

}

---

这是正确的，但是因为我计划在useffect中添加一个服务器请求，所以我不想发送两次请求（现在settingData加载两次，正如我提到的）。因此，我想知道是否可以知道分派正在发生或已完成。然后使用const{loading}=useSettings，并将加载添加为dependency为了使用它，如何知道状态更新是否正在发生/完成？添加了一个codesandbox用于演示