React Duplicate Key Error

Question

我收到以下錯誤，我明白它告訴我什麼，但我無法弄清楚如何解決問題。

flattenChildren(...): Encountered two children with the same key... 

我在我的頁面上有2個包含電子郵件的列表。我的應用程序的初始狀態包含以下數據：

const initialState = { 

    emails: [ 
    { 
     id: 1, from: 'test.1@test.co.uk', body: 'test1 body', title: 'test 1 title', 
    }, 
    { 
     id: 2, from: 'test.2@test.co.uk', body: 'test2 body', title: 'test 2 title', 
    }, 
    ], 

    draggedEmails: [], 

}; 

我的應用程序的UI可以讓你拖放從第一列表項（電子郵件）第二列表（draggedEmails）。

在我的Redux reducer中，我有以下代碼在列表之間移動電子郵件。

let newState = {}; 

    //Check if the email exists in my 'emails' array 
    const doesExistInEmails = state.emails.find(x => x.id === action.id) !== null; 

    //If it exists then move it to the 'draggedEmails' list 
    if (doesExistInEmails) { 

    const filteredEmails = state.emails.filter(e => e.id !== action.emailItem.id); 

    newState = Object.assign(
     {}, 
     state, 
     { draggedEmails: [...state.draggedEmails, action.emailItem], emails: filteredEmails } 
    ); 

    } else { 

    const filteredEmails = state.emails.filter(e => e.id !== action.emailItem.id); 

    newState = Object.assign(
     {}, 
     state, 
     { draggedEmails: [...state.emails, action.emailItem], emails: filteredEmails }); 
    } 

    return newState; 

當我將項目移回到「draggedEmails」列表後，將項目移回到電子郵件列表時，會出現問題。

下面的代碼是用來創建元素和鍵的。

createEmailItem(em) { 
    return React.createElement(
     EmailItem, { email: em, key: `${em.id}` }); 
} 

任何幫助表示讚賞，

感謝。

編輯：將一個項目從'emails'列表移動到'draggedEmails'列表後編輯：Console.Logged狀態。一切都看起來應該如此。

Object {emails: Array[1], draggedEmails: Array[1]} 

編輯2：添加渲染方法。

render() { 
    return (
    <div className="email-container" onDrop={this.onDrop} onDragOver={this.allowDrop}> 
      {this.props.emails.map(this.createEmailItem)} 
    </div> 
    ); 
} 

Answer 1

我發現了這個問題。有4

第一，其次爲回報「不確定」，而不是「空」

const doesExistInEmails = state.emails.find(x => x.id === action.id) !== null; 

第二個是我的動作沒有一個ID，我的動作有emailItem這有一個id

const doesExistInEmails = state.emails.find(x => x.id === action.emailItem.id) !== undefined; 

第三個就是我，在過濾我的電子郵件，而不是在下面一行拖電子郵件。

const filteredEmails = state.filter(e => e.id !== action.emailItem.id); 

最後我在設置狀態時分配了錯誤的值。

{ draggedEmails: [...state.emails, action.emailItem], emails: filteredEmails }); 

應該是...

{ emails: [...state.emails, action.emailItem], draggedEmails: filteredEmails }); 

所以，總體來說，我有很多錯誤的...

感謝誰評論的傢伙。