React：在上下文提供程序被使用之前在它内部运行异步操作

问题描述

我正在运行一个 React 前端应用程序，并且我正在使用 JSON Server 来模拟后端。我还尝试使用 Context 来模拟前端应用程序可以调用的端点。

我从上下文提供程序组件内的 useEffect 钩子调用 JSON Server 端点，该组件还使用 reducer 来管理随上下文导出的方法。

在我的代码中发生的事情是，当 ViewComponent 调用上下文的 get() 方法时，reducer 首先返回其结果（此时是一个空数组），然后 DbProvider 的 useEffect 钩子加载数据来自模拟服务器。

我尝试用 HOC 包装 ViewComponent，该 HOC 应该仅在设置上下文值时才呈现，但我从未让它呈现它的内部组件。

这是一个非常牵强的例子，但是我想知道是否有办法在组件可以使用它之前运行 DbProvider 的 useEffect 钩子，因为我已经知道它是必需的从我在 App 组件中将它作为提供者传递的那一刻起。

--DbContext.js

const DbContext = createContext({
    data: [],get: () => {},});

function dbReducer(state,action) {
    switch (action.type){
        case "GET":
            return { ...state,data: action.payload,}
        default: return state;
    }
}

function DbProvider(props) {
    const [state,dispatch] = useReducer(dbReducer,{data: []});
    const [db,setDb] = useState([]);
    
    useEffect(() => {
        axios({ method: "get",url: "http://localhost:3001/db",responseType: "json",})
        .then((res) => setDb(res.data));
    },[]);

    function get() {
        dispatch({ type: "GET",payload: db,});
    }

    return (
        <DbContext.Provider value={{ data: state.data,get }}
            {...props}
        />
    );
}

export { DbContext,DbProvider };

--App.js--

import { DbProvider } from "./DbContext";

export default function App() {

    return (
        <DbProvider>
            ...
        </DbProvider>
    );
}

--ViewComponent.js--

import { DbContext } from './DbContext';

export default function ViewComponent() {

    const { get } = useContext(DbContext);
    const people = useRef([]);

    useEffect(() => {
        people.current = get();
    },[])

    return ( ... )
}

--ViewWithContext.js--

import { DbContext } from './DbContext';
import ViewComponent from './ViewComponent';

export default function FeedWithContext(props) {
    return ( 
        <DbContext.Consumer>
            {dbContext => dbContext.value && <ViewComponent {...props}/>}
        </DbContext.Consumer>
    )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）