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

Question

我有一个功能组件，需要从父组件接收参数（即props.rosterMonth），然后从数据库中检索数据，最后将结果传递给子组件。

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

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 组件。

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>
    )
}

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

Answer 1

来自数据库的数据将始终被延迟，因为它必须通过来自服务器的 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>
       )
    )
}

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

How to set the data from db to the reducer initial state?

javascript

reactjs

use-reducer