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

但是我仍然从我的/users获取json对象值，并将它们分别打印到控制台。对象是：

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

我错过了一个返回声明，还是我错过了map在.then()之后返回值的方式？我不清楚为什么会出现编译警告。

Answer 1

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.log s。在您的情况下，您可以使用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 2

来自MDN：

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

这意味着必须返回map方法。所以，你应该改变你的代码：

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

或使用forEach（）而不是map（）

Answer 3

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

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

Answer 4

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

{}-创建一个代码块，该代码块需要显式的return语句。
使用（）-隐式返回。

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

4 个答案: