主页 / coding / 问题 / 76937313
Accepted
Rohit
Asked: 2023-08-20 06:46:22 +0800 CST

无法通过 fetch 获取数据到上下文中

  • 772

我有一个简单网站的上下文，我想通过页面加载时的获取来加载该网站。我创建了上下文和提供者：

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 加载的数据，但在 App 组件中，当我使用 时useResumeContext，该值永远不会改变。

reactjs

1 个回答

  1. Best Answer

    您没有使用获取的数据更新上下文值。您应该将恢复数据保持在某个状态，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>
    );
}

    请注意，我添加了一个setResumepropResumeLoader并将简历包装在ResumeContextProvider. 现在，当getResumeJson获取数据时，它将更新状态，并且任何使用的组件都useResumeContext将使用新数据重新渲染。

    • 1

相关问题