预计会返回箭头值; function array-callback-return.为什么？

Question

我有一些问题需要理解为什么我会在这段反应代码上收到编译警告

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

我得到的警告是 Expected to return a value in arrow function array-callback-return

但是我仍然从我的json对象值中获取/users它们,并且它们被单独打印到控制台.对象是:

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

我错过了一个返回语句,或者我错过了一些关于如何map返回值的东西.then()？我不清楚为什么编译警告会出现.

Answer 1

尝试改变 map(() => {}) to map(() => ())

{} - 创建一个需要显式return语句的代码块。
With () - 隐式返回发生。

Answer 2

data.map函数(检查Array.map规范:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)将一个数组(data在您的情况下)转换为新数组.此映射由参数定义data.map.data.map(回调函数)的参数,在您的情况下是箭头函数users => {console.log(users);},必须返回一个值.通过为每个数组元素返回一个值是如何data.map定义映射的.

但在你的情况下,回调函数不返回任何东西,只是console.logs.在您的情况下,您可以使用data.forEach(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach),因为您不使用Array.map功能.

注意:如果你决定使用data.map你应该有一个单数(而不是复数)名称作为回调的参数:data.map(user => {console.log(user);});现在为每个用户调用.

Answer 3

如果您不需要改变数组而只需执行 console.log() ，则可以执行 data.forEach() 。它不应该给你警告。Map 期望您在转换数组后返回一个值。

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

Answer 4

从MDN：

map（）方法创建一个新数组，并在调用数组中的每个元素上调用提供的函数。

这意味着必须返回map方法。因此，您应该像这样更改代码：

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

或使用forEach（）代替map（）