ReactJS es-lint: L'istruzione Return non dovrebbe contenere l'assegnazione
es-lint non riesce in questo caso: l' istruzione Return non dovrebbe contenere l'assegnazione no-return-assign
Ho esaminato questo thread ma inutilmente: la funzione Arrow non dovrebbe restituire l'assegnazione no-return-assign
Cosa posso fare qui per soddisfare es-lint?
La mia variabile di stato
const [monthlyIncidents, setMonthlyIncidents] = useState([
// monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
])
Come sto aggiornando lo stato
setMonthlyIncidents((prevIncidents) => {
return { ...prevIncidents, [incidentMonth]: monthlyIncidents[incidentMonth] += 1 }
})
Risposte
La mia ipotesi è che stia vedendo l' += 1
assegnazione as (che casualmente è anche una mutazione di stato).
Si può essere in grado di cavarsela con solo l'aggiunta di un allo stato attuale. Questo probabilmente converte il tuo array in un oggetto, quindi fai attenzione.
setMonthlyIncidents((prevIncidents) => {
return {
...prevIncidents,
[incidentMonth]: prevIncidents[incidentMonth] + 1,
}
})
In genere con un aggiornamento dello stato come questo è preferibile mappare lo stato esistente allo stato successivo e aggiornare l'elemento. Sembra che incidentMonth
sia semplicemente un indice di array, quindi puoi abbinare l'incidente per indice. Ciò garantisce che lo stato rimanga un array.
setMonthlyIncidents((prevIncidents) =>
prevIncidents.map((incident, index) =>
incident + index === incidentMonth ? 1 : 0
)
);
PROVARE
setMonthlyIncidents ({... prevIncidents, [incidentMonth]: prevIncidents [incidentMonth] + 1,
}).
hai solo bisogno di non assegnare lo stato mentre lo restituisci.Inoltre, davvero non capisco perché stai creando una funzione completamente nuova per impostare lo stato? (cosa fa il setStateVariable
gancio?). Puoi anche disabilitare es-lint per quella linea.