1

好的，我为学习目的构建了一个简单的 ToDo 应用程序，并且我面临一个我无法解决的警告：

当我将 ToDo 检查为 Done 时，会引发错误。我尝试将键设置为每个元素的索引，警告停止，但列表更新时呈现了重复的元素。

这是我的组件：

import React from "react";
import TodoTask from "./TodoTask";

const TodoList = ({todos, onTaskCheck}) => {

    function renderList() {
        return (
            todos.map((todo) => {
                return <TodoTask key={todo.id} todo={todo} onTaskCheck={onTaskCheck} />
            })
        );
    }

    return (
        <div>
            <h1 className="title is-4">ToDo List</h1>
            <ul className="task-list">
                {renderList()}
            </ul>
        </div>
    );
};

export default TodoList;

这是减速器：

export default function TodoReducers(state = [], action) {
    switch(action.type) {
        case "LIST_TODOS":
            return [
                {id: 1, description: "Task 1", isCompleted: true},
                {id: 2, description: "Task 2", isCompleted: true},
                {id: 3, description: "Task 3", isCompleted: true},
                {id: 4, description: "Task 4", isCompleted: false},
                {id: 5, description: "Task 5", isCompleted: false}
            ];
        case "CHECK_TODO":
            return [...state, Object.assign({}, action.payload, action.payload.isCompleted = true)];
        default:
            return state;
    }
}

其余代码在这里（GitHub）

谢谢，抱歉英语不好！

4

1 回答 1

2

问题出在你的减速机上。您无需找到要完成的待办事项并将其完成值编辑为真，而是将所述待办事项的副本附加到数组的末尾。这使您的应用程序尝试呈现所有待办事项，即使条目具有相同的 id（和相同的键）。
您正在这样做：
初始状态： [todo1: completed, todo2: not completed, todo3: completed]
最终状态： [todo:1 completed, todo2: not completed, todo3: completed, todo2: completed]
但这不是我们想要的。

我通过遍历您的待办事项、找到您想要完成的待办事项并修改该待办事项来解决您的问题。
我将此功能添加到与您的减速器相同的文件中（当然，您可以实现它，但是您认为合适）。

function completeTodo(todos, id) {
  return todos
    .map(
      todo => {
        if (todo.id === id)
          todo.isCompleted = true
        return todo
      }
    )
}

现在您可以像这样修改减速器中的状态： 

   case "CHECK_TODO":
            return completeTodo(state, action.payload.id)

这应该可以解决问题。我还建议至少在你的 reducer 中使用 Immutable.js。很多时候它会使编辑你的状态变得更简单。但这当然取决于你。

于 2017-01-03T09:01:10.580 回答