Как обновить значения state в объекте, который хранится в массиве?

Question

Есть state:

const [bank, setBank] = useState([
    {
        name: 'Terk',
        amount: [15, 20, 30]
    },
    {
        name: 'Nas',
        amount: [20, 43]
    },
    {
        name: 'Kastil',
        amount: [65, 13]
    }
]);

При нажатии на кнопку, которая в другом компоненте, вызывается функция из главного компонента. Функция принимает индекс (0,1,2). Мне надо добавить новое значение в массив amount, которое хранится в объекте по этому индексу.

<button onClick={() => onAdd(index)}

Пробовал так: (Цифра 3, это то значение, которое я хотел добавить в массив). Чтобы после этого компоненты перерендерились.

const addMoney = (id) => {
    setBank([...bank[id].amount, 3]);
}

После этого появляется ошибка : TypeError: Cannot read property 'amount' of undefined

Дело в том, что я перебираю массив, чтобы сложить числа в массиве amount, чтобы это значение передать в компонент Header. Перебираю так:

 const filterName = (arr, searchKey) => {
        return arr.filter(obj => Object.keys(obj).some(key => obj[key].includes(searchKey)));
    }   
    const searchableName = filterName(bank, username);
    const userSum = searchableName ? searchableName[0].amount.reduce((a,b) => a+b) : 0;

Answer 1

Код использующий bank рассчитывает, что элементам будут объекты с полем amount.

Однако в методе addMoney устанавливается массив чисел. Из-за этого при попытке получить свойство amount в дальнейшем, получается undefined.

Для решения достаточно получать массив на основе существующего:

setBank(bank.map((el, i)=> 
    i == id ? // если нужный элемент
        ({...el, amount: el.amount.concat(3)}): // добавляем в amount значение
    el // иначе оставляем как есть
));

БЛОГ НА HUSL

Как обновить значения state в объекте, который хранится в массиве?

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