ReactJS es-lint: la declaración de retorno no debe contener asignación

Question

es-lint falla en este caso: la declaración de devolución no debe contener la asignación no-return-assign

He examinado este hilo pero fue en vano: la función de flecha no debería devolver la asignación no-return-assign

¿Qué puedo hacer aquí para satisfacer a es-lint?

Mi variable de estado

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

Cómo estoy actualizando el estado

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

Answer 1

Supongo que está viendo la += 1asignación como (que, casualmente, también es una mutación de estado).

Es posible que pueda arreglárselas con solo agregar uno al estado actual. Esto probablemente convierta su matriz en un objeto, así que tenga cuidado.

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

Normalmente, con una actualización de estado como esta, es preferible asignar el estado existente al siguiente estado y actualizar el elemento. Parece que incidentMonthes simplemente un índice de matriz, por lo que puede hacer coincidir el incidente por índice. Esto garantiza que el estado siga siendo una matriz.

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

Answer 2

TRATAR

setMonthlyIncidents ({... prevIncidents, [incidenteMonth]: prevIncidents [incidenteMonth] + 1,

}).

solo necesita no asignar el estado mientras lo devuelve. Además, realmente no entiendo por qué está creando una función completamente nueva para establecer el estado. (¿Qué hace el setStateVariablegancho?). También puede desactivar es-lint para esa línea.