import { useEffect, useState } from "react";
import FormField from "../FormField/FormField";
import { ViewWrapper } from "../ViewWrapper/ViewWrapper";
const PhoneValidation = () => {
const [info, setInfo] = useState([]);
const error = (err) => {
console.log(err);
};
useEffect(() => {
fetch(`http://numbersapi.com/2012/year?json`)
.then((response) => response.json())
.then((data) => setInfo(data))
.catch(error);
}, []);
return (
<ViewWrapper as="form">
<h2>Sprawdź informacje o numerze</h2>
<FormField />
<p>
{info.text}
</p>
</ViewWrapper>
);
};
export default PhoneValidation;
Cześć,
Mam taki problem ze pobrałem dane z API za pomocą fetch() w react i chciałbym je wyświetlić w moim komponencie ale wyglada na to ze w chwili gdy ten komponent się renderuje te dane jeszcze nie są dostępne. Może wie ktoś jak mogę rozwiązać ten problem?
EDIT Ważne: dane pobieram z abstractapi a nie z tego ktore mam w kodzie. Nie moge tutaj dac linka bo mam w nim swoj klucz. Jak sprawdzalem z PunkApi, ktore zwraca tablice to moge sprawdzic czy tablica w moim stanie info jest pusta i jezeli nie jest pusta to mi wyswietli i to dziala, ale problem jest gdy pobieram z mojego abstractapi i jest zagniezdzenie obiektow, wtedy wlasnie wyskakuje mi błąd. Chcąc pobrać dane z abstarctapi kod jest taki sam i zmieniam tyko adres url.