警告：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。它會讓你的狀態在很多時候更簡單。但是，這當然取決於你。