React Redux设置项目完成

Question

我有一种感觉我离这个很近......我有一个待办事项列表应用程序我正在构建。

用户可以单击标有“完成”的按钮将该特定项目标记为已完成。

我的想法是，当用户点击该按钮时，只将“已完成”状态更新为true。

由于某种原因，状态中的文本从所选项目更改为“未定义”，而另一项在单击“完成”时添加到该状态

这是我的行动：

#myImgDesign:hover {
  opacity: 0.8;
  transform-origin: 25% 50%;
  transform: scale(1.095, 1.095);
  border-style: dotted
}

这是我的减速机：

export function completeTodo() {
    return {
        type: "COMPLETE_TODO",
        completed: true
    }
}

Answer 1

以下代码创建了一个新的数组，其中包含一个新的待办事项对象和所有以前的待办事项（所以基本上你是从前一个状态向数组的开头添加一个待办事项）：

[
  {
    text: action.text,
    completed: action.completed,
    id: getId(state)
  },
  ...state
]

你应该过滤掉旧的待办事项对象：

[
  {
    text: action.text,
    completed: action.completed,
    id: getId(state)
  },
  ...state.todos.filter(todo => todo.id !== getId(state))
]

Answer 2

您的COMPLETE_TODO操作没有文本字段，因此reducer会将undefined指定给状态。

据我了解，您不希望在完成后更改项目的文本属性。您可以从reducer中删除 text 分配。