为什么 splice 在反应中不能正常工作？

Question

我正在尝试使用 delete 按钮从我的列表中删除行。我喜欢这样

if (state.indexOf(action.payload) > -1) {
      console.log('iff----')
        state.splice(state.indexOf(action.payload), 1);
    }
          console.log(state)

     return state

但它没有删除该行。这是我的代码 https://plnkr.co/edit/bpSGPLLoDZcofV4DYxPe?p=preview 实际上使用添加按钮我正在生成项目列表并且有删除按钮我正在尝试使用 delete button 从列表中删除项目你能告诉我为什么它不起作用吗？

Answer 1

在 React 或 Redux 中处理状态时避免使用 Array#splice。这会改变你的状态，这是你永远不想做的。相反，喜欢 Array#slice 这样的不可变方法。例如

const index = state.indexOf(action.payload);
if (index === -1) {
  return state;
}
return state.slice(0, index).concat(state.slice(index + 1));

在 ES6 中，最后一行也可以写成：

return [...state.slice(0, index), ...state.slice(index + 1)];

Answer 2

这种方式的缺陷在于JavaScript中，对象和数组都是引用类型，所以当我们得到一个数组的时候，实际上得到的是一个指针由 React 管理的原始数组对象。如果我们然后拼接它，我们已经改变了原始数据，虽然它确实可以正常工作而不会抛出错误，但这并不是我们真正应该做的，这可能会导致无法预测的应用程序，这绝对是一种不好的做法。一个好的做法是在操作数组之前创建一个数组的副本，一个简单的方法是调用 slice 方法。不带参数的 Slice 只是复制整个数组和 returns 一个新的数组，然后将其存储。我们现在可以安全地编辑这个新数组，然后更新以与我们的新数组反应状态。让我举个例子：

我们有一个这样的数组 const arr=[1,2,3,4,5]。这是原始数组。

正如我之前告诉你的，我们可以这样做：

const newVar=arr.slice();
newVar.splice(Index,1);
console.log(newVar);

或

这种方法的替代方法是使用它的 ES6 功能，它是 Spread Operator

我们之前的代码可以是这样的：

const newVar=[...arr]
newVar.splice(Index,1);
console.log(newVar);

就是这样。祝你好运

为什么 splice 在反应中不能正常工作？

why splice not working correctly in react?

reactjs

react-router

redux

react-redux