时间戳

首页 > 解决方案 > 为什么当我在 redux 中这个 reducer 中的状态发生变化时我的状态没有重新渲染

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

问题描述

这符合逻辑，但我的组件没有重新渲染

 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];

标签： reactjsredux

解决方案

I suspect the issue lies in the fact that even though the state is a new array reference, the specific list element is not, and is in fact, being mutated with the splice (recall that splice operates on the array in place). Spreading newStateInit into a new array is superfluous since Array.prototype.map already returns a new array reference.

When updating state you typically need to also shallow copy any nested state that is being updated. Map the existing state into newStateInit, and while mapping previous list element objects when the list.id matches the payload, shallow copy the list element and use Array.prototype.filter to return a new cards array where the current card.id doesn't match the id you are trying to remove.

case CONSTANTS.DELETE_CARD:
  const { cardID } = action.payload;
  const newStateInit = state.map((list) => {
    if (list.id === action.payload.listID) {
      return {
        ...list,
        cards: list.cards.filter(card => card.id !== cardID),
      };
    }
    return list;
  });
  localStorage.setItem("todo-list", JSON.stringify(newStateInit));
  return newStateInit;

推荐阅读