警告：flattenChildren（...）：</p> <p>を私はToDoリストをチェックすると：同じキー

Question

がOK、Imは学習目的のためのシンプルなToDoリストアプリを構築し、Imは私が解決することはできません警告が直面していると発生しました2人の子供Doneとしてエラーがスローされます。私はキーを各要素のインデックスとして設定しようとしましたが、警告は停止しましたが、リストが更新されると複製された要素がレンダリングされました。

HERESに私のコンポーネント：

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; 

HERESに減速：

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

問題は、あなたの減速です。完了した値を完了して編集したいToDoを見つけるのではなく、そのToDoのコピーを配列の末尾に追加します。これにより、同じID（同じキー）を持つエントリがあるにもかかわらず、アプリケーションはすべてのtodosをレンダリングしようとします。あなたはこれをやっている
：
初期状態：[todo1: completed, todo2: not completed, todo3: completed]
最終的な状態：[todo:1 completed, todo2: not completed, todo3: completed, todo2: completed]
これは、我々はしかし、望むものではありません。

私はあなたが完了し、その1つを変更したいものを見つけ、あなたのドスをループして、問題を解決しました。
私はあなたのレデューサーと同じファイルにこの関数を追加しました。

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) 

これはトリックを行う必要があります。少なくとも、あなたのレデューサーのImmutable.jsを使うことをお勧めします。それはあなたの状態を多くの時間をより簡単に編集させるでしょう。しかし、それはもちろん、あなた次第です。