为什么拼接不能正常反应？

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

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

我们有一个像这样的数组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);

就是这样。祝你好运

Answer 2

Array#splice在React或Redux中使用state时避免使用.这改变了你永远不想做的状态.相反,赞成不可变的方法,如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)];