如何在Immutable中从数组中删除对象

How to remove an object from an array in Immutable?

本文关键字：数组 删除 对象 Immutable      更新时间：2023-09-26

给定这样的状态：

state = {
  things: [
    { id: 'a1', name: 'thing 1' },
    { id: 'a2', name: 'thing 2' },
  ],
};

如何创建删除ID"a1"的新状态？推送新商品很容易：

return state.set(state.get('things').push(newThing));

但我不知道如何通过对象的id属性来搜索和删除对象。我试过这个：

return state.set('tracks',
  state.get('tracks').delete(
    state.get('tracks').findIndex(x => x.get('id') === 'a2')
  )
)

但这看起来很混乱，而且只有在找到该项时才有效，因为如果findIndex返回-1，则这是delete的有效值。

您可以使用Array#filter。

return state.set('things', state.get('things').filter(o => o.get('id') !== 'a1'));

当您使用filter时，它会迭代所有循环->一种有效的方法是找到index=>slice并使用splitter。。。

const index = state.findIndex(data => data.id === action.id);
return [...state.slice(0, index), ...state.slice(index + 1)];

或者，由于您正在"搜索然后删除"。。。

var itemIndex = this.state.get("tracks").findIndex(x => x.get('id') === 'a2');
return itemIndex > -1 ? this.state.deleteIn(["tracks", itemIndex]) : this.state;

这将确保在没有变化的情况下，状态不会发生变化。

在寻找类似任务的解决方案时发现了此线程。用更新方法解决：

return state.update('things', (things) => things.filter((t) => t.id !== action.things.id))

有什么想法/意见吗？哪一个更好/更受欢迎？

即使没有以下函数的immutable.js，也可以做到这一点。

function arrayFilter(array, filter) {
  let ret = array
  let removed = 0
  for (let index = 0; index < array.length; index++) {
    const passed = filter(array[index], index, array)
    if (!passed) {
      ret = [...ret.slice(0, index - removed), ...ret.slice(index - removed + 1)]
      removed++
    }
  }
  return ret
}

ImmutableJS使用嵌套数组

Immutablejs很好，但同时在某些边缘情况下会使事情变得更复杂，尤其是在使用嵌套数组时。

有时，对于这个特定的问题，从一般意义上来说，将其带回JS更容易。

// 1. get a copy of the list into normal JavaScript
const myList = state.getIn(['root', 'someMap', 'myList']).toJS()
// 2. remove item in list using normal JavaScript and/or anything else
myList.splice(deleteIndex, 1)
// 3. return the new state based on mutated myList
return state
  .mergeDeep({ root: { someMap: { myList: undefined } }})
  .mergeDeep({ root: { someMap: { myList } }})

不幸的是，步骤3需要专门设置为undefined，因为如果您简单地将myList直接设置为数组值，ImmutableJS将对当前列表之间的值进行比较，并且只修改它们，从而产生奇怪的行为。

这样做的理由是为了简化心理开销我不建议在循环中执行此操作，而是在必须但应该在步骤3之前的循环中操作纯JS数组。

相关文章：