Estou usando React com typescript.
O initialData
permanece o mesmo null
quando eu consoloe.log mesmo que eu esteja atualizando o valor dentro do arquivo useEffet
.
E por que esse código em loop está constantemente fazendo solicitações?
Este é o meu context
:
import React, {
Dispatch,
SetStateAction,
createContext,
useContext,
useState,
} from 'react';
interface InitialDataType {
GameName: string;
GameUrl: string;
HasRegulation: boolean;
HideNavBar: boolean;
HideSessionNetLoss: boolean;
HideSessionTimer: boolean;
RegulationAction: string;
RegulationModel?: string;
TournamentId?: number;
TournamentType?: number;
TournamentsBaseUrl?: string;
Url: string;
VendorController: string;
}
interface InitialDataContextInterface {
initialData: InitialDataType | null;
setInitialData: Dispatch<SetStateAction<InitialDataType | null>>;
}
const Context = createContext({} as InitialDataContextInterface);
const InitialDataProvider = ({ children }) => {
const [initialData, setInitialData] = useState<InitialDataType | null>(
null
);
return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
<Context.Provider value={{ initialData, setInitialData }}>
{children}
</Context.Provider>
);
};
export default InitialDataProvider;
export const useInitialData = () => useContext(Context);
Este é o meu HomeComponent:
import React, { useContext, useEffect } from 'react';
import axios from 'axios';
import UkRegulation from '../../regulations/UkRegulation/UkRegulation';
import GameIframe from '../../components/GameIframe/GameIframe';
import { useInitialData } from '../../context/InitialDataContext';
const Home = () => {
const { initialData, setInitialData } = useInitialData();
useEffect(() => {
axios
.get(
'https://myUrl.com/my-endpoint'
)
.then((response) => {
setInitialData(response.data);
console.log('InitialData', initialData);
})
.catch((error) => {
console.log(error);
});
}, []);
return (
<div>
<UkRegulation />
<GameIframe />
</div>
);
};
export default Home;
em seu
useEffect
gancho, você está registrando o estado imediatamente após atualizá-lo, mas asetState
função fornecida pelouseState
gancho é assíncrona, o que significa que o valor não será atualizado imediatamente. Para ver o valor atualizado, você deve usar um separadouseEffect
e passarinitialData
como uma dependência para a matriz de dependência de gancho.e parece que o código que você forneceu não deve fazer novas solicitações constantemente, porque o
useEffect
gancho é chamado apenas uma vez quando o componente é montado por causa da matriz de dependência vazia;[]
portanto, pode ser outra parte do seu código, fazendo com que o componente seja renderizado novamente e chameusseEffect
o gancho novamente .