Question

我正在尝试从列表中删除卡。 Redux Dev Tools中的状态已更新，但未重新呈现UI。不确定为什么吗？

这个化简器逻辑会改变我现有的状态吗？

尝试使用componentWillReceiveProps进行检查，在删除卡时会注意到，newProps不会更改。

在Reducer中

    const listReducerDefaultState = [
  {
    title: "title",
    id: `list0`,
    cards: [
      {
        id: `card0`,
        title: "card 1"
      },
      {
        id: `card1`,
        title: "card 2"
      }
    ]
  },
  {
    title: "title",
    id: `list1`,
    cards: [
      {
        id: `card2`,
        title: "card 1"
      },
      {
        id: `card=3`,
        title: "card 2"
      },
      {
        id: `card=4`,
        title: "card 3"
      },
      {
        id: `card=5`,
        title: "card 4"
      }
    ]
  }
];

.... 

case "DELETE_CARD": {
      const { ListID } = action.payload;
      const CardID = action.payload.id;
      let newState = state;

      let index = newState.findIndex(item => item.id === action.payload.ListID);
      newState[index].cards = newState[index].cards.filter(
        ({ id }) => id !== CardID
      );
      // console.log(newState);
      return newState;
    }

操作

export const deleteCard = ({ id, ListID }) => ({
  type: "DELETE_CARD",
  payload: { id, ListID }
});

Answer 1

尝试

case "DELETE_CARD":
  {
    const {
      ListID,
      id: CardID
    } = action.payload;

    return state.map((item) => {
      if (item.id === ListID) {
        return ({
          ...item,
          cards: item.cards.filter(({ id }) => id !== cardID)
        })
      }

      return item;
    });

避免改变状态。

Answer 2

let newState = state;

罪魁祸首是

。这是在改变原始状态。减速器中的所有逻辑应该是不变的。

尝试使用：

const newState = {...state};

Redux状态更改但不重新呈现

2 个答案: