Bonjour, je suis débutant, j'ai un exercice a faire pour l'organisme ou je suis en formation.

voici le code:

import { useEffect, useState } from "react";
import axios from "axios";
import Header from "../../components/Header";

const Products = () => {
const [data, setData] = useState();

useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get("http://localhost:3000/categories");
console.log(response.data);
setData(response.data);
} catch (error) {
console.log({ message: error.response });
}
};
fetchData();
}, []);

return (
<>
<Header />
{data.map((item) => {
return <p>salut</p>;
})}
</>
);
};

export default Products;

Bon le problème c'est que une fois sur 2, j'ai un rendu page blanche qui s'affiche avec l'erreur:
"index.js:23 Uncaught TypeError: Cannot read properties of undefined (reading 'map')"
Ok je veux bien, sauf que quand je commente et décommente ce bout de code:
{data.map((item) => {
return <p>salut</p>;
})}
ca marche, j'ai bien mes 200 et quelques salut qui s'affiche, il suffit que j'actualise et hop ca redevient page blanche et ça m'affiche l'erreur dans la console.
J'y comprends rien quelqu'un peut m'aider ça fait depuis hier soir je suis la dessus je peux pas avancer du coup, y'a un problème avec le useEffect?
Merci d'avance aux kheys qui ont une idée...

Euh ok je sais pas pourquoi ca a couper mais juste au dessus du useEffect, j'ai bien créer un state:
const [data, setData] =useState();

Non mais c'est sérieux ?? JV ne supporte pas les crochets ou quoi?

Ok j'ai trouvé... Dans mon state data j'ai mis useState(); au lieu de useState([]) ..............

Déjà on fetch pas dans un useEffect , react-quey ou redux

Comment ça on fetch pas?

Envoie ton nouveau code, car là même le useState est mauvais.

ça doit être comme ça
const [data, setData] = useState([]);

Et bien sur tu change en fonction de l'utilité de ta variable.

En ce qui concerne le fetch, t'as le droit de le faire pour débuter, et tu peux garder ça comme c'est si tu comptes pas réutiliser les données récupérées autre part dans le code, ou bien faire des traitements poussifs dessus.

Mais dans les applications en production, on utilise redux, qui permet d'avoir un state global à l'application, et qui est accessible à tout tes components. (tu peux voir ça comme un objet accessible partout)

Pour modifier cet "objet", on appelle des méthodes appelés actions qui émetteront des évènements qui seront écouté par des reducers, qui modifiront l'object.

Le but de ça est d'avoir des méthodes qui seront disponible partout afin de mettre à jour l'état.

Ça te fait une sauvegarde en cache c'est pratique et ça évite de tout le temps appeller la base de donnée

Donc en fait ReactJS c'est du fonctionnel full variables globales ?

C'est vraiment de la merde redux, de manière générale la plupart des stores sont sur utilisés alors qu'en règle générale y a juste besoin d'un context

Pour l'auteur, installe react-query et utilise typescript bon sang, t'aurais tout de suite vu qu'il fallait mettre data?.map

Le 15 mars 2023 à 12:28:28 [Black_Spirit] a écrit :
Donc en fait ReactJS c'est du fonctionnel full variables globales ?

Ca s'appelle un store, rien à voir, si tu croyais descendre react en rétorquant ce truc débile alors que c'est un pattern utilisé par d'autres c'est raté