Reactjs 是否删除对象中的对象？

我正在用reactjs、redux构建一个简单的应用程序；像这样的数据库

const initialState = [
  {
    title: "List 1",
    id: 0,
    cards: [
      {
        id: 0,
        text: "Task 1",
      },
      {
        id: 1,
        text: "Task 2",
      },
    ],
  },
  {
    title: "List 2",
    id: 1,
    cards: [
      {
        id: 0,
        text: "Task 3",
      },
      {
        id: 1,
        text: "Task 4",
      },
    ],
  },
];

该应用程序有许多列表。在多张列表中有多张卡，我想删除列表中的一张卡 所以在我的listReducer.js中。我创建了一个delete reducer来删除这样的任务

case CONSTANTS.DELETE_CARD: {
      const { listId, id } = action.payload;
      return state.map((list) => {
        if (list.id === listId) {
          return {
            ...list,
            cards: list.cards.filter((card) => card.id !== id),
          };
        }
        return list;
      });
    }

但它不能正常工作。我做错了什么

---

代码：

问题不在于减速器。我查看了您的codesandbox示例，并添加了一些

console.log

，看起来所有内容都得到了正确更新

问题在于

components/List.js

中的

List

组件的渲染功能。因为您没有将唯一的密钥传递给

卡

组件，所以React不知道哪些项已更改，它只看到卡列表长度的更改。因此，在重新渲染时，它会将旧列表渲染到新的长度（希望有意义！）有关

键的更多信息，请参见此处

您可以通过向
卡传递唯一密钥来解决此问题，如第72行所示：

返回
问题不在于减速器。我查看了您的codesandbox示例，并添加了一些
console.log
，看起来所有内容都得到了正确更新

问题在于
components/List.js
中的
List
组件的渲染功能。因为您没有将唯一的密钥传递给
卡
组件，所以React不知道哪些项已更改，它只看到卡列表长度的更改。因此，在重新渲染时，它会将旧列表渲染到新的长度（希望有意义！）有关
键的更多信息，请参见此处

您可以通过向
卡传递唯一密钥来解决此问题，如第72行所示：

返回
你打败了我；-）所以我投了你的一票……但我认为他的减速机仍然存在一个问题：他直接变异了它，你打败了我；-）所以我投你的票……但我认为他的减速机仍然存在一个问题：他是直接变异的