3
votes

rafraîchir la table avec useEffect

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

reactjs

1 commentaires

Où est votre composant de table? Utilisez-vous un package npm pour cela? Ajoutez également le code correspondant.

3 Réponses :

6
votes

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)
    });
};

1 commentaires

@gabrielgraciani J'apprécierais si vous pouviez marquer ma réponse comme utile

0
votes

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();
}, []);

0 commentaires

0
votes

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.

0 commentaires