Javascript 如何将数据库中的数据设置为reducer初始状态？

我有一个功能组件，需要从父组件接收参数（即，

props.rosterMonth

），然后从数据库检索数据，最后将结果传递给子组件

import {useContext,useEffect} from 'react';
import RosterWebContext from '../../../utils/RosterWebContext';
export default function Testing(props){
    let [contextValue,updateContext]=useContext(RosterWebContext);
    useEffect(()=>{
        console.log(contextValue.rosterList);
    },[contextValue])
    return(
        <tbody>
        </tbody>
    )
}

我的问题是，如何设置子组件的初始状态

import {useEffect,useReducer} from 'react';
import Roster from '../../../utils/Roster';
import RosterWebContext from '../../../utils/RosterWebContext';
import Testing from './Testing';
export default function VVTable(props){
    let dataReducer=(state,action)=>{
        switch (action.type){
            case 'updateRosterMonth':
                return action.value;
            default:return state;     
        }
    }
    const [contextValue, updateContext] = useReducer(dataReducer,{});
    useEffect(()=>{
        const getData = async () => {
            console.log("Undo:Get Data from DB");
            let roster = new Roster();
            let rosterList= await roster.get(props.rosterMonth.getFullYear(),props.rosterMonth.getMonth()+1);
            updateContext(
                {
                    type:'updateRosterMonth',
                    value:{rosterList}
                }
            );        
        }
        getData();
    },[props]);
    return(
        <table id="rosterTable">
            <RosterWebContext.Provider value={[contextValue, updateContext]}>
                <Testing/>
            </RosterWebContext.Provider>
        </table>    
    )
}   

---

目前，我将初始状态设置为空对象，因此子组件“Testing”可能会接收空对象，为了防止未定义的对象错误，我需要编写一些代码来检查传入的上下文值。如果可以将数据库值设置为初始状态，则可以删除这些检查代码。

数据库中的数据将始终延迟，因为必须通过该API调用从服务器检索数据（除非您正在进行服务器端渲染）。所以你必须面对这样一个事实，一开始你没有名册

在这种情况下，我要做的是检查是否定义了

contextvalue.rosterList

，如果它没有向用户显示一个好的加载微调器，如下所示：

import {useContext,useEffect} from 'react';
import RosterWebContext from '../../../utils/RosterWebContext';
export default function Testing(props){
    let [contextValue,updateContext]=useContext(RosterWebContext);

    useEffect(()=>{
        console.log(contextValue.rosterList);
    },[contextValue])

    return(
        !!contextValue.rosterList?(
          <tbody>
          </tbody>
        ):(
        <span>Loading Roster</span>
       )
    )
}

从“react”导入{useContext，useffect}；
从“../../../utils/RosterWebContext”导入RosterWebContext；
导出默认功能测试（props）{
让[contextValue，updateContext]=useContext（RosterWebContext）；
useffect（（）=>{
console.log（contextValue.rosterList）；
}，[contextValue]）
返回(
！！contextValue.rosterList(
):(
装载花名册
)
)
}