Je suis nouveau pour réagir et j'ai le problème suivant: useEffect met à jour des temps infinis, mais je veux juste qu'il mette à jour les données lorsque j'insère un nouvel enregistrement, je serais reconnaissant si quelqu'un peut me corriger.
c'est mon code:
index.js
import {createUser, getUsers} from '../actions'; const Home = () => { const [data, setData] = useState([]); useEffect(() => { async function fetchData(){ const result = await getUsers(); setData(result); console.log("teste: ", result); } fetchData(); }, [setData]); const handleCreateUser = (user) => { createUser(user).then((users) => { }); };
si je mets le deuxième paramètre useEffect (() => {}, [setData]), il brise la boucle infinie mais la table ne se met pas à jour lorsque j'insère un nouveau registre et que je dois utiliser F5.
Qu'est-ce que je fais mal? l'utilisateur de création fonctionne parfaitement, je veux juste attraper en même temps la table
3 Réponses :
Dans useEffect
, sans second paramètre (un tableau de dépendances), votre effet s'exécutera indéfiniment.
Si vous souhaitez que votre effet ne s'exécute que lorsque vous créez un nouvel utilisateur, vous pouvez créer un état distinct qui sera ensuite inclus dans les dépendances de useEffect, appelez-le par exemple refreshKey
. Ma suggestion serait:
import {createUser, getUsers} from '../actions'; const Home = () => { const [data, setData] = useState([]); const [refreshKey, setRefreshKey] = useState(0); useEffect(() => { async function fetchData(){ const result = await getUsers(); setData(result); console.log("teste: ", result); } fetchData(); }, [refreshKey]); const handleCreateUser = (user) => { createUser(user).then((users) => { // Refresh the effect by incrementing 1 setRefreshKey(oldKey => oldKey +1) }); };
@gabrielgraciani J'apprécierais si vous pouviez marquer ma réponse comme utile
Il semble que vous ne souhaitiez récupérer vos données qu'une seule fois (lors du chargement des composants). Si tel est le cas, utilisez simplement un tableau vide pour vos dépendances
useEffect(() => { async function fetchData(){ const result = await getUsers(); setData(result); console.log("teste: ", result); } fetchData(); }, []);
Vous pouvez laisser le tableau de dépendances vide pour qu'il ne s'exécute qu'une seule fois.
j'espère que cela vous aidera à mieux comprendre.
useEffect(() => { doSomething(value) })
le tableau de dépendances vide ne s'exécute qu'une seule fois, au montage
useEffect(() => { doSomething(value) }, [value])
passer la valeur comme une dépendance. si les dépendances ont changé depuis la dernière fois, l'effet s'exécutera à nouveau.
useEffect(() => { doSomething() }, [])
pas de dépendance. Cela est appelé après chaque rendu.
Où est votre composant de table? Utilisez-vous un package npm pour cela? Ajoutez également le code correspondant.