Question

我正在学习 React，但收到此警告：

<块引用>

Array.prototype.map() 期望在箭头函数 array-callback-return 结束时返回一个值

我通过在 return true 语句之外添加 if/else if 来清除它，即：

arr.map(foo => {
  if (foo.attr === 'someKey') {
    return baz
  } else if (foo.attr === 'someOtherKey') {
    return bar
  }
  return true //adding this return value clears the warning
})

这是否会造成任何问题，或者这是清除该警告的好方法？我正在学习 React，所以我只是想确保我不会养成任何代价高昂的坏习惯。

Answer 1

您不需要为您的代码段 return true。你可以用不同的方式编写你的回调实现，这样你的 linter 就不会给你错误警告

arr.map(foo => {
  if (foo) {
    return baz;
  } 
  return bar;
})

在上面的代码中，return bar 仅在 if condition 为假时才会执行，否则您的代码将提前返回并且无法到达 return bar

更新：

如果您有 if-else-if 规则，您可以从 map 函数返回 undefined 并使用 filter(Boolean) 过滤掉未定义的值。需要你映射需要返回一些东西，如果你的条件都没有映射，则指定返回值

arr.map(foo => {
  if (foo.attr === 'someKey') {
    return baz
  } else if (foo.attr === 'someOtherKey') {
    return bar
  }
  return; 
}).filter(Boolean);

Answer 2

警告是因为当 foo.atr 既不是 someKey 也不是 someOtherKey 时，您还没有指定返回什么。返回 true 指定在这种情况下返回的内容。但它可以是任何有效值

我应该返回 true 以清除 .map() 期望在箭头函数警告结束时返回一个值吗？

2 个答案: