javascript - 是否可以只更新对象的数组状态？

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
});

通过创建新数组的单线解决方案。

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 }))));