代码之家 › 专栏 › 技术社区 › Rohit

无法通过获取上下文获取数据

reactjs

Rohit · 技术社区 · 3 年前

我有一个简单网站的上下文,我想通过页面加载获取来加载它。我创建了上下文和提供程序:

const ResumeContext = createContext<ResumeJson | undefined>(undefined);

export function useResumeContext() {
    const context = useContext(ResumeContext);
    return context;
}

function ResumeLoader({ children }: PropsWithChildren) {
    let resume = useResumeContext();

    useEffect(() => {
        async function getResumeJson() {
            const response = await fetch("resume.json");
            const data: ResumeJson = await response.json();
            return data;
        }

        getResumeJson().then((data) => {
            resume = data;
            console.log(data);
        });
    }, []);

    return <Fragment></Fragment>;
}

export default function ResumeContextProvider({ children }: PropsWithChildren) {
    return (
        <ResumeContext.Provider value={undefined}>
            <ResumeLoader />
            {children}
        </ResumeContext.Provider>
    );
}

然后将其设置在我的应用程序的底部 index.tsx :

root.render(
    <React.StrictMode>
        <ResumeContextProvider>
            <App />
        </ResumeContextProvider>
    </React.StrictMode>
);

我看到fetch加载的数据,但在应用程序组件中,当我使用 useResumeContext ,值永远不会改变。

1 回复 | 直到 3 年前

NoName 3 年前

您没有使用提取的数据更新上下文值。您应该将简历数据保持在 ResumeContextProvider 并在获取完成时更新该状态。以下是更正后的版本:

import React, { createContext, useContext, useEffect, useState, PropsWithChildren, Fragment } from 'react';

const ResumeContext = createContext<ResumeJson | undefined>(undefined);

export function useResumeContext() {
    const context = useContext(ResumeContext);
    return context;
}

function ResumeLoader({ setResume }: { setResume: (resume: ResumeJson) => void }) {
    useEffect(() => {
        async function getResumeJson() {
            const response = await fetch("resume.json");
            const data: ResumeJson = await response.json();
            return data;
        }

        getResumeJson().then((data) => {
            setResume(data);
            console.log(data);
        });
    }, [setResume]);

    return <Fragment></Fragment>;
}

export default function ResumeContextProvider({ children }: PropsWithChildren) {
    const [resume, setResume] = useState<ResumeJson | undefined>(undefined);

    return (
        <ResumeContext.Provider value={resume}>
            <ResumeLoader setResume={setResume} />
            {children}
        </ResumeContext.Provider>
    );
}

注意,我添加了 setResume 道具到 ResumeLoader 并将简历包装在 简历上下文提供程序 。现在,什么时候 getResumeJson 获取数据,它将更新状态,并使用 useResumeContext 将使用新数据重新渲染。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前