1

我正在用 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 中。我创建了一个删除减速器来删除这样的任务。

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;
      });
    }

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

代码：https ://codesandbox.io/s/github/htactive-nhaptt/crud-trello?file=/src/reducers/listReducers.js:1466-1773

4

1 回答 1

4

问题不在于您的减速器。我查看了您的代码框示例并添加了一些console.log，看起来一切都正确更新了。

List问题出在你的组件的渲染函数中components/List.js。因为您没有将唯一键传递给Card组件，所以 React 不知道哪些项目发生了变化，它只会看到卡片列表长度的变化。因此，在重新渲染时，它会将旧列表渲染到新长度（希望它有意义！）有关更多信息，请参见此处keys：https ://reactjs.org/docs/lists-and-keys.html#keys 。

Card您可以通过在第 72 行传递一个唯一键来解决此问题：

return <Card key={card.id} id={card.id} listId={listId} text={card.text} />;

于 2020-07-19T17:20:18.587 回答