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这样的不可变方法。 e.g。

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方法。不带参数的切片仅复制整个数组并返回一个新数组，然后将其存储。现在我们可以安全地编辑这一新数组，然后更新以对新数组做出反应。让我给你举个例子：

我们有一个像from PIL import Image # Two RGBA images. board = Image.open('chessboard.png') w_pawn = Image.open('w_pawn_png_shadow_128px.png') a_eight = (102, 30, 210, 158) # Left, top, right and bottom coordinates of where # the piece is pasted onto the board battle_board = board.copy() # First make a fully transparent image the same size as the chessboard image. tmp_img = Image.new('RGBA', battle_board.size, color=(0,0,0,0)) tmp_img.paste(w_pawn, box=a_eight) # Paste chess-piece on it at desired posn. battle_board.alpha_composite(tmp_img) # Composite tmp_img onto board img "in-place". battle_board.show() # TaDa!这样的数组。这是原始数组。

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

const arr=[1,2,3,4,5]

或

该方法的另一种选择是使用它的ES6功能，即 Spread Operator

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

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

就是这样。祝你好运

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

2 个答案: