ReactJS es-lint：Return 语句不应包含赋值

Question

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

Answer 1

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

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

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

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

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

Answer 2

尝试

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

}).

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

ReactJS es-lint：Return 语句不应包含赋值

ReactJS es-lint: Return statement should not contain assignment

javascript

typescript

reactjs

eslint

arrow-functions