Сложение значений определнных свойств объектов при доавлении их в массив в React
Имеем 2 инпута в форме: Amount, Date. При отправке формы она отправляется в useState const [chartAmount, setChartAmount] = useState([]), в данный пустой массив добавляется объект со свойствами:
{id: Math.random(), x: 'месяц введенной даты', y: 'введенная сумма'. Нужно сделать проверку, если свойство значения свойства 'x' у объектов одинаковое, то значения свойств 'y' должны складываться и образовывать новый объект, а если значения свойства 'x' разные, то должен добавляться новый объект в массив.
Например, имеем [{id: Math.random(), x: 'Jan', y: '2'}], затем добавляем [{id: Math.random(), x: 'Jan', y: '4'}] Желаемый результат: [{id: Math.random(), x: 'Jan', y: '6'}], затем добавляем [{id: Math.random(), x: 'Feb', y: '10'}], Желаемый результат: [{id: Math.random(), x: 'Jan', y: '6'}, {id: Math.random(), x: 'Feb', y: '10'}]
Перепробовал все варианты сложения свойств в объектах, но все они не корректно работают из-за того, что используется useState.
const [chartAmount, setChartAmount] = useState([
{ id: Math.random(), x: '', y: null },
])
const [enteredAmount, setEnteredAmount] = useState('')
const [enteredDate, setEnteredDate] = useState('')
const chartData = [
{
id: Math.random(),
x: new Date(enteredDate).toLocaleString('en-En', {
month: 'short',
}),
y: enteredAmount,
},
]
const formSubmitHandler = event => {
event.preventDefault()
let result = chartAmount.reduce((prev, current) => {
let item = prev.find(item => item.x === current.x)
if (item) {
item.y += current.y
} else {
prev.push(current)
}
return prev
}, [])
setChartAmount([...result, chartData[0]])
console.log(chartAmount)
}
Данный код начинает складывать параметры свойств 'y' только после первого добавления, т.е. в первый раз он делает новый объект, начиная со второго добавления он начинает их складывать
Здесь я добавил {id: 0.6416405218092833, x: 'Jul', y: 4} 3 раза, получилось так:
0: {id: 0.6416405218092833, x: '', y: null}
1: {id: 0.9747589564401866, x: 'Jul', y: 12}
2: {id: 0.9225358874610452, x: 'Jul', y: 4}
Затем при добавлении {id: 0.9752748846821591, x: 'Jun', y: 4}, получается так
0: {id: 0.23251874690813024, x: '', y: null}
1: {id: 0.5010432332673009, x: 'Jul', y: 12}
2: {id: 0.9752748846821591, x: 'Jun', y: 4}
В общем стейт работает не корректно. Что я делаю не так?