ReactJS es-lint：返回语句不应包含赋值答案

【问题标题】：ReactJS es-lint: Return statement should not contain assignmentReactJS es-lint：返回语句不应包含赋值
【发布时间】：2020-12-09 10:42:53
【问题描述】：

es-lint 在这种情况下失败： return 语句不应包含赋值 no-return-assign

我已经查看了这个帖子，但无济于事：Arrow function should not return assignment no-return-assign

我可以在这里做什么来满足 es-lint？

我的状态变量

const [monthlyIncidents, setMonthlyIncidents] = useState([
    // monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
  ])

我如何更新状态

setMonthlyIncidents((prevIncidents) => {
   return { ...prevIncidents, [incidentMonth]: monthlyIncidents[incidentMonth] += 1 }
})

【问题讨论】：

顺便说一句，像这样更新后每月事件将是对象而不是数组。我不确定这是否是你真正想要的。
你在这一点上是对的 Pavel。感谢您的洞察力！ @PavelKratochvil

标签： javascript reactjs typescript eslint arrow-functions

【解决方案1】：

我的猜测是将+= 1 视为赋值（巧合的是，这也是一个状态突变）。

只需在当前状态下添加一个即可。这可能会将您的数组转换为对象，因此请谨慎使用。

setMonthlyIncidents((prevIncidents) => {
  return {
    ...prevIncidents,
    [incidentMonth]: prevIncidents[incidentMonth] + 1,
  }
})

通常使用这样的状态更新，最好将现有状态映射到下一个状态并更新元素。看起来incidentMonth 只是一个数组索引，因此您可以通过索引匹配事件。这保证了状态仍然是一个数组。

setMonthlyIncidents((prevIncidents) =>
  prevIncidents.map((incident, index) =>
    incident + index === incidentMonth ? 1 : 0
  )
);

【讨论】：

非常感谢德鲁。两种方法都有效，第一个将数组转换为对象的方法是正确的。另外，我从没想过在这种情况下使用地图功能。它更灵活！
@YosephAhmed 太好了！如果这充分解决了您的问题并且您发现它有帮助，那么请接受答案并投票。干杯。

【解决方案2】：

试试

setMonthlyIncidents( { ...prev事件， [incidentMonth]: prevIncidents[incidentMonth] + 1,

})。

您只需要在返回状态时不分配状态。另外，我真的不明白您为什么要创建一个全新的函数来设置状态？（setStateVariable 钩子有什么作用？）。您也可以为该行禁用 es-lint。

【讨论】：