Возможно ли обновить только состояние массива объектов?

Question

Мне было интересно, есть ли какая-либо документация или ссылка, которая могла бы помочь мне понять, как обновить массив объектов (без дубликатов).

Мое состояние выглядит так:

accounts: [
    { name: ‘mike’ },
    { name: ‘tee’ },
    { name: ‘ralf’ },
    { name: ‘candy’ },
    { name: ‘bon’ },
    { name: ‘salm’ },
    { name: ‘shark’ },
    { name: ‘tof’ },
    { name: ‘hulk’ },
    { name: ‘zar’ },
    { name: ‘blake’ },
  ],

следующий массив выглядит так:

accounts: [
    { name: 'mike’, balance: ’1000’},
    { name: 'tee’, balance: ’235345’},
    { name: 'zar’, balance: ’3455’},
    { name: 'candy’, balance: ’567567’},
    { name: 'tee’, balance: ’8767’},
    { name: 'salm', balance: ’234’},
    { name: 'blake', balance: ’134’},
  ],

Таким образом, обновленное состояние на setState будет выглядеть так:

accounts: [
    { name: 'mike’, balance: ’1000’},
    { name: 'tee’, balance: ’235345’},
    { name: ‘ralf’ },
    { name: 'candy’, balance: ’567567’},
    { name: ‘bon’ },
    { name: 'salm', balance: ’234’},
    { name: ‘shark’ },
    { name: ‘tof’ },
    { name: ‘hulk’ },
    { name: 'zar’, balance: ’3455’},
    { name: 'blake', balance: ’134’},
  ],

Я пробовал с prevState.accounts.concat(accounts), но это толькодобавляет дубликаты.

Answer 1

Поиск объекта на основе условия, а затем обновление значений при использовании метода Array#find для поиска элемента и метода Object.assign для копирования значений в существующий объект.

accounts.forEach( o => {
   let oldObj = prevState.accounts.find(o1 => o1.name === o.name);
   Object.assign(oldObj, o)
})

---

Финальный код будет выглядеть так:

this.setState(prevState => {
  newAccounts.forEach(o => {
    let oldObj = prevState.accounts.find(o1 => o1.name === o.name);
    Object.assign(oldObj, o)
  })
  return prevState.accounts
});

Решение Oneliner путем создания нового массива.

this.setState(prevState => newAccounts.map(o => Object.assign(prevState.accounts.find(o1 => o1.name === o.name), o)));

// if you don't want to mutate original object in previous state then

this.setState(prevState => newAccounts.map(o => Object.assign({}, prevState.accounts.find(o1 => o1.name === o.name), o)));

// or with ES6 spread syntax
this.setState(prevState => newAccounts.map(o => ({ ...prevState.accounts.find(o1 => o1.name === o.name), ...o }))));

Answer 2

Если ваши новые государственные счета всегда будут подмножеством предыдущего значения государственных счетов.Вы можете использовать что-то вроде этого

this.state = {
    accounts : [
        { name: 'mike' },
        { name: 'tee' },
        { name: 'ralf' },
        { name: 'candy' },
        { name: 'bon' },
        { name: 'salm' },
        { name: 'shark' },
        { name: 'tof' },
        { name: 'hulk' },
        { name: 'zar' },
        { name: 'blake' },
    ]
}
const newAccounts = [
    { name: 'mike', balance: 1000},
    { name: 'tee', balance: 235345},
    { name: 'zar', balance: 3455},
    { name: 'candy', balance: 567567},
    { name: 'tee', balance: 8767},
    { name: 'salm', balance: 234},
    { name: 'blake', balance: 134},
]
this.setState({accounts: this.state.accounts.map (x => ({...x, ...newAccounts.find(y => y.name === x.name)}))});

Вы можете использовать Array.find , чтобы найти значения старых государственных счетов в новых учетных записях, а затем использовать ... или Object.assign для объединения свойств.