Сложение значений определнных свойств объектов при доавлении их в массив в 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}

В общем стейт работает не корректно. Что я делаю не так?


Ответы (0 шт):