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

编程问答 2022-08-15

问题描述

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,])

我如何更新状态 

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

解决方法

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

您可以通过 just 将其添加到当前状态来解决问题。这可能会将您的数组转换为对象，因此请谨慎使用。

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

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

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

尝试

setMonthlyIncidents（ { ...以前的事件， [incidentMonth]：prevIncidents [incidentMonth] + 1，

}）。

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

arrow-functionsjavascriptreactjsreactjstypescripttypescript