Napisałam prosty serwer, zwracający mi do reactowej aplikacji (pisanej w javaScripcie) listę zwierząt danego użytkownika i listę gatunków. Każde zwierzę jest przypisane do gatunku. Przykładowe zwierzę (jest to obiekt z listy, zwracany z zapytania o zwierzęta użytkownika):
age: 2
avg_length_of_life: 16 <- jest to średnia długość życia gatunku, nie zwierzęcia!
characteristics: "Nice, soft and furry!"
id: 17
name: "Puszek"
occurrence: "Worldwide!"
specieName: "Cat"
Chciałabym policzyć, ile dany użytkownik ma zwierząt z każdego gatunku (nie są one zahardcodowane, więc lista powinna być tworzona na bieżąco), oraz jaka jest średnia długość życia dla zwierząt poszczególnych gatunków.
Dane pobieram w useEffect, za pomocą Axiosa, więc wydaje mi się, że powinnam użyć czegoś, co uruchomi się po ich zebraniu i ustawieniu za pomocą set:
const [animals, setAnimals] = useState([]);
Mam pewność, że dane zbierane są poprawnie (w innym komponencie je wyświetlam i nie ma problemu).
Wydaje mi się, że funkcja powinna najpierw tworzyć tabelę z nazwami gatunków, a potem doliczać do niej liczę, czy średnią wieku. Nie wiem tylko, w którym momencie funkcje powinna się wywoływać. Na razie mam tyle:
const [posts, setPosts] = useState([]);
//Na pewno działa, testowałam
useEffect(()=>{
const fetchPosts = async () =>{
try{
const response = await axios.get(SPECIE_URL);
if (response && response.data) setPosts(response.data);
}
catch(err){
if(!err?.response){
console.log("Something goes wrong");
}
}
}
fetchPosts();
},[]);
function getData(){
var specieTable;
for (let i=0; i<posts.length; i++){
posts.map((specie)=>(
specieTable[i] = specie.name
))
console.log(specieTable)}
}
Listę zwierząt pobieram w podobny sposób i przechowuję je za pomocą useState.