箭头函数不应返回赋值 Eslint

Question

如果值不存在，我正在映射从 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)

Answer 1

箭头功能

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

地图功能

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

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

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

const chartData = res.data.map(data => ({

  ...data,

  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,

});

展开语法会将属性展开到一个新的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

Answer 2

问题：

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

);

Answer 3

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

这应该解决它：

 const chartData = res.data.map(

    (data) => {

      data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;

 });