Redux删除减速器过滤器方法不起作用

a6b3iqyw 于 2023-01-26 发布在其他

关注(0)|答案(1)|浏览(127)

我尝试使用filter方法从数组中删除一个元素，如下所示：

removeDisplate: (state, action: PayloadAction<string>) => {
  console.log(action.payload);
  state.map((item) => {
    console.log(item.name);
  });
  state.filter((item) => item.name !== action.payload);
},

在我的前端这样调用它：

{cart.map((displate, index) => {
  return (
    <Card
      sx={{
        minHeight: "150px",
        display: "flex",
        padding: "10px",
        gap: "10px",
        backgroundColor: "black",
        margin: "10px",
        position: "relative",
      }}
      key={index}
    >
      <CloseIcon
        sx={{
          position: "absolute",
          top: "10px",
          right: "10px",
          color: "red",
          cursor: "pointer",
        }}
        onClick={() => handleRemoveDisplate(displate.name)}
      />
    </Card>
  );
})}

有效负载和状态项的名称都与控制台日志中的相同，但它仍然没有将其从数组中删除，有什么想法吗？

redux

来源：https://stackoverflow.com/questions/75197453/redux-remove-reducer-filter-method-not-working

1条答案

按热度按时间

jslywgbw1#

Array.prototype.filter不会改变它所操作的数组，它返回一个***new***数组，其中删除了未通过 predicate 回调的元素。在切片缩减器中，您可以只返回过滤当前状态的结果作为下一个状态值。

removeDisplate: (state, action: PayloadAction<string>) => {
  return state.filter((item) => item.name !== action.payload);
},

另外，因为你要修改这个数组，你不想***使用数组索引作为React键，使用一个更内在于你要Map的数据的值，比如id属性。
示例：

{cart.map((displate, index) => {
  return (
    <Card
      sx={{
        minHeight: "150px",
        display: "flex",
        padding: "10px",
        gap: "10px",
        backgroundColor: "black",
        margin: "10px",
        position: "relative",
      }}
      key={displate.id} // <-- or any unique property among sibling elements
    >
      <CloseIcon
        sx={{
          position: "absolute",
          top: "10px",
          right: "10px",
          color: "red",
          cursor: "pointer",
        }}
        onClick={() => handleRemoveDisplate(displate.name)}
      />
    </Card>
  );
})}

赞(0）回复(0）举报 2023-01-26

我来回答

Redux删除减速器过滤器方法不起作用

1条答案

相关问题

热门标签

最新问答