警告：flattenChildren（...）：遇到两个孩子使用相同的密钥

Question

好，林建设一个简单的待办事项应用学习之用，和Im面对，我解决不了的警告：

当我检查了待办事项作为完成，错误被抛出。我试图将键设置为每个元素的索引，警告停止，但列表更新时呈现重复的元素。

我的继承人组成：

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

The rest of the code is here (GitHub)

谢谢，遗憾的英语不好！

Answer 1

问题在于你的减速器。您不需要找到要完成的待办事项并将其完成值编辑为true，您可以将所述待办事项副本附加到数组的末尾。这使得您的应用程序尝试渲染所有待办事项，即使有相同ID（同一个密钥）的条目。
你这样做：
初始状态：[todo1: completed, todo2: not completed, todo3: completed]
最终状态：[todo:1 completed, todo2: not completed, todo3: completed, todo2: completed]
这不是，这只是我们想要的。

我解决了您的问题，方法是循环播放您的待办事项，找到您要完成并修改的节目。
我在与reducer相同的文件中添加了此函数（当然，您可以实现它，但是您认为合适）。

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。它会让你的状态在很多时候更简单。但是，这当然取决于你。