Question

我正在使用immutability-helper对状态数据执行CRUD操作，并想知道我是否应该始终使用$splice来删除数据，或者是否可以使用filter（因为它是不具破坏性？）

例如，假设我有一个对象数组：

todos = [
 {id: 1, body: "eat"},
 {id: 2, body: "drink"},
 {id: 3, body: "sleep"},
 {id: 4, body: "run"}
]

鉴于商品ID，我可以通过两种方式将其删除：

一个。找到它的index并使用$splice：

index = todos.findIndex((t) => { return(t.id === id) });
newtodos = update(todos, { $splice: [[index, 1]] })

OR

湾使用filter：

newtodos = todos.filter((t) => { return(t.id === id) });

filter更简洁但我不确定与在这种情况下使用$splice相比是否有任何缺点。

Answer 1

使用immutability-helper：

方便处理nested collection：

const collection = [1, 2, { todos: [...todos] }];
const newCollection = update(collection, {
  2: {
    todos: {
      $apply: todos => todos.filter(t => t.id !== id)
    }
  }
});

并且，它会为您提供collection和collection[2]的新副本：

console.log(newCollection === collection, newCollection[2] === collection[2]);
//false false

因此，如果您使用react-redux，connect状态到组件，如果您希望组件重新呈现，则状态发生更改时，您必须返回新的状态。

用旧方式执行此操作符：

const todoList = collection[2].todos;
const idx = todoList.findIndex(t => t.id === id);
const newTodoList = update(todoList, { $splice: [[index, 1]] });
const newCollectionTwo = [...collection];
newCollectionTwo[2] = {
  todos: newTodoList
};

并使用控制台查看：

console.log(collection, newCollectionTwo, collection === newCollectionTwo, collection[2] === newCollectionTwo[2]);

对于简单的数据结构和运算符，我认为它与filter相等。

抱歉我的英语不好，这是我的意见。

使用$ splice（来自immutability-helper）比过滤器从React中的数组中删除项目有什么好处？

1 个答案: