Question

这完成了逻辑，但我的组件没有重新渲染

 case CONSTANTS.DELETE_CARD:
      const newStateInit = state.map((list) => {
        if (list.id === action.payload.listID) {
          let delcardIndex = list.cards.findIndex((card) => {
            return card.id === action.payload.cardID;
          });
          list.cards.splice(delcardIndex, 1);
        }
        return list;
      });
      localStorage.setItem("todo-list", JSON.stringify(newStateInit));
      return [...newStateInit];

Answer 1

我怀疑问题在于，即使状态是一个新的数组引用，特定的列表元素也不是，事实上，它被 splice 变异了（回忆一下 { {1}} 就地对数组进行操作）。将 splice 扩展到一个新数组中是多余的，因为 newStateInit 已经返回了一个新的数组引用。

更新状态时，您通常还需要浅复制任何正在更新的嵌套状态。将现有状态映射到 Array.prototype.map，并在 newStateInit 匹配有效负载时映射之前的 list 元素对象，浅复制 list.id 元素并使用 list返回一个新的 Array.prototype.filter 数组，其中当前的 cards 不匹配您要删除的 ID。

card.id

为什么当我在 redux 中的这个 reducer 中的状态发生变化时，我的状态没有重新渲染

1 个答案: