如何在對象中使用動態屬性

Question

我有一個具有動態參數的handleInputBlur函數。說我有this.props.user對象這樣

{ name: 'abc', age: 10 } 

然後在我的UI我能做聯編輯，所以handleInputBlur將獲得名changeField的參數，它是一個包含更改的字段的對象：

{ age: 10 } 

我仍然必須將整個對象傳遞迴後端，我如何用現有對象替換更新後的字段？

我試過，但得到了一個意外的標記錯誤：

handleInputBlur = (changedField) => { 

    const existingUser = this.props.user 

    const updatedUserObj = Object.assign({}, existingUser, { 
     existingUser[changedField]: changedField 
    }) 
} 

如何更新基於changedField的鍵和值的現有用戶？

Answer 1

使用computed property names通過圍繞該與括號中的表達式，以便它的計算值被用作密鑰的密鑰：

const key = Object.keys(changedField)[0]; 
const updatedUserObj = Object.assign({}, existingUser, { 
    [key]: changedField[key] 
}) 

首先，表達key的值將被計算，則該值將是用作鑰匙。請注意0​​是key的值。它所做的是獲取changedField對象內的第一個鍵 - 正在更改的屬性，例如'name'或'age'。然後，通過訪問changedField中的第一個鍵的值，將該屬性設置爲新屬性的值。