箭头函数不应返回赋值 Eslint答案

【问题标题】：Arrow function should not return assignment Eslint箭头函数不应返回赋值 Eslint
【发布时间】：2020-07-30 09:52:40
【问题描述】：

我正在映射从 API 返回的值，如果值不存在，则添加一个虚拟值作为防御代码。为此，我使用 JS Map 来获取结果。但不幸的是，我收到了 eslint 错误 Arrow function should not return assignment 。在这里，我分享我实现的代码。请检查并建议我最好的解决方案。我不想禁用 eslint 错误。提前致谢。

代码：

 const chartData = res.data.map(
    (data) => data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric
  );

错误：

Arrow function should not return assignment. eslint (no-return-assign)

【问题讨论】：

data.latestMetric = data.latestMetric ?
对不起，我没听懂
const chartData = res.data.map( (data) => data.latestMetric =( data.latestMetric === null ? dummyLatestMetric : data.latestMetric) );
eslint.org/docs/rules/no-return-assign
对了，你想在.map返回什么？你想要data 或data.latestMetric 的集合吗？

标签： javascript reactjs eslint eslint-config-airbnb

【解决方案1】：

需要返回值：

const chartData = res.data.map((data) => {
  data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
  return data;
});

【讨论】：

@qiAlex 现在呢。我添加了{ 和}

【解决方案2】：

Arrow Function

箭头函数表达式是常规函数表达式的语法紧凑替代方案，尽管它没有与 this、arguments、super 或 new.target 关键字的绑定。箭头函数表达式不适合作为方法，它们不能用作构造函数。

Map Function

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

.map() 函数将要求您为每次迭代返回一个值。如果只想循环遍历数组做副作用，可以考虑forEach或者其他循环函数。

在你的情况下，我看到你想有条件地修改res.data中的latestMetric，你可以这样做：

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

spread syntax会将data属性传播到一个新对象中，然后我们根据条件有条件地设置latestMetric的值

如果不想使用展开语法，也可以使用传统的Object.assign方法：

const chartData = res.data.map(data => Object.assign({}, data, {
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

关于你的防御策略，你可能有兴趣使用|| 语法，但要小心，因为它会验证所有虚假值（它包括：false、0、 null、undefined等）

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric || dummyLatestMetric,
});

最后但同样重要的是，您最好先了解 ESLint 规则，并阅读该编码实践背后的原因，看看您是否要使用该规则，或者修改它，甚至为您的项目禁用它.

参考：https://eslint.org/docs/rules/no-return-assign

【讨论】：

【解决方案3】：

问题：

https://eslint.org/docs/rules/no-return-assign

这条规则告诉你不允许返回这样的赋值操作：

return a = 3 // or similar.

但这正是你正在做的，所以

诀窍是返回一个对象/属性，而不是一个赋值操作=。

不清楚在.map返回你有什么兴趣，你想返回整个data还是只返回data.latestMetric，所以我的回答也包括两种情况：

如果你需要修改data并返回，试试这个：

const chartData = res.data.map(
  data => (data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric) && data
  // updated data.latestMetric and then returning a whole object
);

如果你只需要data.latestMetric，那么试试这个：

const chartData = res.data.map(
  data => data.latestMetric === null ? dummyLatestMetric : data.latestMetric
);

【讨论】：

【解决方案4】：

由于您没有从箭头函数显式返回值，因此 eslint 希望您使用带有主体的函数。

这应该可以解决它：

 const chartData = res.data.map(
    (data) => {
      data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
 });

【讨论】：