当我在React useState中更新数组时，它会一直默认为初始状态.我做错了什么

Question

我有一个状态数组monthlyIncidents，该数组中有12个数字，我想根据满足的某些条件更新这些数字。在网上研究后，我发现实现这一点的一种方法是复制数组，更新元素，然后最终更新状态。我试过这个，但是它不能正常工作。

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

在我的useEffect实现中，我在一组记录上循环(总共3次(，并且我想要更新monthlyIncidents数组的"incidentMonth"位置的任何元素。此外，从我的伪数据中，我知道在循环结束时，索引7(August(处的元素的值应该为3。

useEffect(() => {
if (data === undefined || isLoading) {
console.log('data is undefined')
} else {
const totalIncidents: number = data.length
for (let incident = 0; incident < totalIncidents; incident += 1) {
let incidentMonth = getIncidentMonth(data[incident].reportedOn)
handleUpdate(incidentMonth)
}
}
}, [data])

这就是我的handleUpdate函数的样子：

const handleUpdate = (incidentMonth: number) => {
console.log(monthlyIncidents: ", monthlyIncidents)
var newMonthlyIncidents = [...monthlyIncidents]
newMonthlyIncidents[incidentMonth] += 1
console.log("newMonthlyIncidents: ", newMonthlyIncidents)
setMonthlyIncidents(newMonthlyIncidents)
}

现在我将发布控制台中的输出。不知怎的，每个月Incidents都会回到其初始状态(所有元素都存储0

iteration number  0
VisualizeIncidents.tsx:29 monthlyIncidents: (12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
VisualizeIncidents.tsx:32 newMonthlyIncidents:  (12) [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0]
VisualizeIncidents.tsx:48 iteration number  1
VisualizeIncidents.tsx:29 monthlyIncidents: (12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
VisualizeIncidents.tsx:32 newMonthlyIncidents:  (12) [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0]
VisualizeIncidents.tsx:48 iteration number  2
VisualizeIncidents.tsx:29 monthlyIncidents: (12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
VisualizeIncidents.tsx:32 newMonthlyIncidents:  (12) [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0]

---

请求的整个组件

import React, { useEffect, useState } from 'react'
import useIncidents from '../hooks/useIncidents'
import IncidentFilter from '../IncidentFilter'
import IncidentSearchRequest from '../model/IncidentSearchRequest'
const VisualizeIncidents = () => {
const searchFilter = IncidentFilter.reported
const searchRequest: IncidentSearchRequest = { status: searchFilter }
const { data, isLoading } = useIncidents(searchRequest)
const [monthlyIncidents, setMonthlyIncidents] = useState([
// monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
])
const handleUpdate = (incidentMonth: number) => {
var newMonthlyIncidents = [...monthlyIncidents]
newMonthlyIncidents[incidentMonth] += 1
console.log('newMonthlyIncidents: ', newMonthlyIncidents)
console.log('monthlyIncidents before:', monthlyIncidents)
setMonthlyIncidents(newMonthlyIncidents)
console.log('monthlyIncidents after:', monthlyIncidents)
}
const getIncidentMonth = (reportedOn: string) => {
// reportedOn: "2020-08-12T19:53:30.153Z"
return Number(reportedOn.slice(5, 7)) - 1
}
useEffect(() => {
if (data === undefined || isLoading) {
console.log('data is undefined')
} else {
const totalIncidents: number = data.length
for (let incident = 0; incident < totalIncidents; incident += 1) {
const incidentMonth = getIncidentMonth(data[incident].reportedOn)
console.log('iteration number ', incident)
handleUpdate(incidentMonth)
}
}
}, [data])
// console.log("after updating: ", monthlyIncidents)
return (
<>
<LineGraph
datasets={[
{
backgroundColor: 'blue',
borderColor: 'black',
data: [
{
x: 'January',
y: 12,
},
{
x: 'February',
y: 11,
},
{
x: 'March',
y: 10,
},
],
label: 'Incidents',
},
]}
title="Reported Incidents Overtime"
xAxes={[
{
label: 'Months',
type: 'category',
},
]}
yAxes={[
{
label: 'Numbers',
type: 'linear',
},
]}
/>
</>
)
}
export default VisualizeIncidents

Answer 1

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

不需要handleUpdate函数

信用证：amakhrov

资源：reactjs.org/docs/hooks-reference.html#功能更新