Início / coding / Perguntas / 76937313
Accepted
Rohit
Asked: 2023-08-20 06:46:22 +0800 CST

Não é possível obter dados por meio de busca no contexto

  • 772

Eu tenho um contexto para um site simples que desejo carregar por meio de busca no carregamento da página. Eu criei o contexto e o provedor:

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

E então configure-o na base do meu aplicativo, no index.tsx:

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

Vejo os dados carregados pelo fetch, mas no componente App, quando uso o useResumeContext, o valor nunca muda.

reactjs

1 respostas

  1. Best Answer

    Você não está atualizando o valor de contexto com os dados buscados. Você deve manter os dados de resumo em um estado dentro ResumeContextProvidere atualizar esse estado quando a busca for concluída. Aqui está uma versão corrigida:

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

    Observe que adicionei um setResumesuporte ResumeLoadere envolvi o currículo em um estado dentro de ResumeContextProvider. Agora, quando getResumeJsonbuscar os dados, ele atualizará o estado e todos os componentes usados useResumeContext​​serão renderizados novamente com os novos dados.

    • 1

relate perguntas