预期返回箭头中的值； function 数组回调返回。 为什么？

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 object 值，并且它们被单独打印到控制台。 object 是：

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

我是否缺少返回语句，或者我是否缺少 map 如何在map .then()之后返回值的内容？ 我不清楚为什么会出现编译警告。

Answer 1

你的具体例子是：

data.map(users => {
   console.log(users);
});

其中data是以下数组：

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

---

data.map函数（检查Array.prototype.map规范）将一个数组（在您的情况下为data ）转换为一个新数组。 转换（映射）由data.map的参数定义，也称为回调函数。 在您的情况下，回调函数是箭头函数users => {console.log(users);} 。 data.map的回调函数必须返回一个值。 通过为数组的每个项目返回一个值是data.map定义映射的方式。

但是在您的情况下，回调函数不返回任何内容。 您的意图不是做任何类型的映射，而只是到console.log 。 因此，在您的情况下，您可以使用data.forEach （ Array.prototype.forEach ），因为您不使用data.map功能。

注意：您还应该为回调函数的参数使用单数（而不是复数）名称： data.map(user => {console.log(user);}); 因为此参数设置为旧数组中的单个元素。

Answer 2

尝试将map(() => {}) to map(() => ())

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

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()

Answer 5

当我这样破坏时它会带来这个错误抱怨

{ people.map((person) => (
const [id,name,age,image] = person;
        <return>
            <article className='person' key={id}>
            <img src={image} alt={name} />
            <div>      
        <h4>{name}</h4>        
        <p>{age} Years</p>
            </div>
        </article>
        </return>
  ))}

所以我现在这样做没有破坏和它对我的工作

{ people.map((person) => (
        <return>
            <article className='person' key={person.id}>
            <img src={person.image} alt={person.name} />
            <div>      
        <h4>{person.name}</h4>        
        <p>{person.age} Years</p>
            </div>
        </article>
        </return>
  ))}

Answer 6

应为 {} 隐式返回 use ()。

尝试这个

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

Answer 7

您可以使用此方法映射数据map(() => ())而不是此map(() => {})