web-dev-qa-db-fra.com

Devrait renvoyer une valeur dans la flèche; fonction tableau-rappel-retour. Pourquoi?

J'ai des problèmes pour comprendre pourquoi je reçois un avertissement de compilation sur cette partie de mon code de réaction

fetch('/users')
        .then(res => res.json())
        .then(data => {
            data.map(users => {
                console.log(users);
            });
        });

L'avertissement que je reçois est Expected to return a value in arrow function array-callback-return

Cependant, je reçois toujours les valeurs d'objet json de mon /users, Et elles sont imprimées sur la console individuellement. L'objet est:

    {
        id: 1,
        username: "Foo"
    }, {
        id: 2,
        username: "Bar"
    }

Suis-je en train de manquer une déclaration de retour, ou est-ce que je manque quelque chose avec la façon dont map renvoie des valeurs après une .then()? Je ne sais pas pourquoi l'avertissement de compilation apparaîtrait.

javascriptarraysecmascript-6arrow-functions
9
Chef1075

Fonction data.map (Vérifiez la spécification Array.map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map =) convertit un tableau (data dans votre cas) en un nouveau tableau. Ce mappage est défini par l'argument de data.map. L'argument de data.map (La fonction de rappel), dans votre cas la fonction flèche users => {console.log(users);}, doit renvoyer une valeur. En retournant une valeur pour chaque élément du tableau, voici comment data.map Définit le mappage.

Mais dans votre cas, la fonction de rappel ne renvoie rien, juste console.log S. Dans votre cas, vous pouvez utiliser data.forEach ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach ) comme vous n'utilisez pas la fonctionnalité Array.map.

REMARQUE: si vous décidez d'utiliser data.map, Vous devez avoir un nom singulier (plutôt que pluriel) comme argument de rappel: data.map(user => {console.log(user);}); qui est maintenant appelé pour chaque utilisateur.

19
croraf

De MDN:

La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

Cela signifie que la méthode map doit être renvoyée. Donc, vous devez changer votre code comme ceci:

fetch('/users')
    .then(res => res.json())
    .then(data => {
        data.map(users => {
            return console.log(users);
        });
    });

ou utilisez forEach () au lieu de map ()

6
Cecil

Si vous n'avez pas besoin de muter le tableau et de faire simplement console.log (), vous pouvez faire data.forEach () à la place. Cela ne devrait pas vous avertir. Map s'attend à ce que vous retourniez une valeur après avoir transformé le tableau.

fetch('/users')
        .then(res => res.json())
        .then(data => {
            data.forEach(users => {
                console.log(users);
            });
        });
4
Rodius