Réagir Crochet Avertissements pour fonction async dans useEffect: useEffect fonction doit retourner une fonction de nettoyage ou rien

J'ai essayé le useEffect exemple quelque chose comme ci-dessous:

JS:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

et je reçois ce message d'avertissement dans ma console. Mais le nettoyage est facultatif pour les appels asynchrones je pense. Je ne sais pas pourquoi j'obtiens ce message d'avertissement. La liaison sandbox pour des exemples. https://codesandbox.io/s/24rj871r0p
Réagir Crochet Avertissements pour fonction async dans useEffect: useEffect fonction doit retourner une fonction de nettoyage ou rien

InformationsquelleAutor RedPandaz | 2018-11-16

37

Je suggère de regarder Dan Abramov (l'un des réagir créateurs) réponse ici:

Je pense que vous êtes le rendant plus compliqué qu'il doit être.
```
export default function Example() { 
    const [data, dataSet] = useState(false)

    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await res.json()
      console.log(response);
      dataSet(response)
    }

    useEffect(() => {
      fetchMyAPI();
    }, []);

  return <div>{data}</div>
}
```
À plus long terme, nous allons décourager ce modèle car il encourage les conditions de course. Tels que quelque chose pourrait se produire entre votre appel commence et se termine, et vous pourriez avoir obtenu de nouveaux accessoires. Au lieu de cela, nous vous recommandons de Suspense pour la récupération de données qui donne un aspect plus
```
const response = MyAPIResource.read();
```
et pas d'effets. Mais en attendant, vous pouvez déplacer la async des trucs à une fonction distincte et de l'appeler.
- Vous pourriez résoudre la condition de la course des questions en vérifiant si le composant est démonté comme suit: useEffect(() => { let unmounted = false promise.then(res => { if (!unmounted) { setState(...) } }) return () => { unmounted = true } }, [])
- Vous pouvez également utiliser un package nommé utilisez-async-effet. Ce package vous permet d'utiliser les async attendent de la syntaxe.
- À l'aide d'un auto invoquant la fonction ne pas laisser async fuite à la useEffect définition de fonction ou une coutume de la mise en œuvre d'une fonction qui déclenche l'appel asynchrone comme un wrapper autour de la useEffect sont le meilleur pari pour l'instant. Tandis que vous pouvez inclure un nouveau paquet comme l'utilisation suggérée-async-effet, je pense que c'est un problème simple à résoudre.
InformationsquelleAutor RTW
25

Lorsque vous utilisez une fonction async comme
```
async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}
```
elle renvoie une promesse et useEffect ne vous attendez pas à la fonction de rappel pour le retour de la Promesse, plutôt il s'attend à ce que rien n'est renvoyé ou une fonction est retournée.

Comme une solution de contournement pour l'avertissement, vous pouvez utiliser un auto invocation asynchrone en fonction.
```
useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);
```
ou pour le rendre plus propre, vous pouvez définir une fonction et ensuite l'appeler
```
useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);
```
la deuxième solution sera plus facile à lire et à vous aider à écrire du code pour annuler les précédentes demandes si un est tiré ou d'enregistrer la dernière réponse à la requête de l'état

Travail codesandbox
- Un paquet de rendre cela plus facile a été fait. Vous pouvez le trouver ici.
- mais eslint ne tolère pas avec qui
- il n'existe aucun moyen pour exécuter le nettoyage/didmount de rappel
- Je n'ai pas ce que vous essayez de dire
- lorsque vous utilisez useEffect vous pouviez retourner une fonction pour faire le nettoyage comme vous désabonner à des événements. Lorsque vous utilisez la fonction async vous ne pouvez pas retourner quoi que ce soit parce useEffectne va pas attendre le résultat
- oui useEffect n'allons pas attendre le résultat avant de le nettoyage et de là, dans le nettoyage, vous devez annuler la demande asynchrone
- vous dites que je peux mettre une fonction nettoyage dans un async un? j'ai essayé, mais mon nettoyer la fonction n'est jamais appelée. Pouvez-vous faire un petit exemple?
InformationsquelleAutor Shubham Khatri

Jusqu'Réagir fournit une meilleure façon, vous pouvez créer un helper, useEffectAsync.js:

import { useEffect } from 'react';


export default function useEffectAsync(effect, inputs) {
    useEffect(() => {
        effect();
    }, inputs);
}

Maintenant, vous pouvez passer d'une fonction async:

useEffectAsync(async () => {
    const items = await fetchSomeItems();
    console.log(items);
}, []);

Agréable et le travail parfait lorsque vous traitez avec de la base de données

InformationsquelleAutor Ed I

Vous devez vous connecter pour publier un commentaire.