如何在React狀態下更新對象

我在JS對象（非數組）中有一個索引列表users。它是React狀態的一部分。如何在React狀態下更新對象

{ 
    1: { id: 1, name: "John" } 
    2: { id: 2, name: "Jim" } 
    3: { id: 3, name: "James" } 
}

什麼是最好的做法：

添加新用戶{ID：4，名稱：「簡」}，ID爲（4）爲重點
刪除用戶ID爲2
變化的用戶＃2的名稱爲「彼得」

沒有任何一成不變的助手。我正在使用Coffeescript和Underscore（所以_.extend可以......）。

謝謝。

來源

2016-04-15 Martin Sojka

這就是我會做

地址：var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
刪除：var newUsers = _.extend({}, users)然後delete newUsers['2']
變化：var newUsers = _.extend({}, users)然後newUsers['2'].name = 'Peter'

來源

2016-04-15 15:07:28 kavun

這是正確的答案。使用extend創建一個新對象，然後進行變異。 –

我同意，但在「更改」的情況下，我們還必須複製修改過的用戶對象，如下所示：var newUser = _.extend（{}，users ['2']，{name：'Peter'}）; var newUsers = _.extend（{}，users，{2：newUser}）; –

@ pierrepinard_2很好的一點，這使得顯示單個用戶的組件的shouldComponentUpdate更好。 – kavun

如果你不使用助焊劑，你使用this.setState（）更新狀態對象。

delUser(id) { 
    const users = this.state.users; 
    delete users[id]; 
    this.setState(users); 
} 

addChangeUser(id, name) { 
    const users = this.state.users; 
    users[id] = {id: id, name: name}; 
    this.setState(users); 
}

然後你就可以用這個執行測試用例：

addChangeUser(4, 'Jane); 
addChangeUser(2, 'Peter'); 
delUser(2);

來源

2016-04-15 15:08:46

您的'addUser'方法將使用鍵id來更新對象，而不是使用OP指定的鍵添加具有鍵'4'的對象。 'changeName'有同樣的問題。 –

你說得對。猜猜我輸入的速度比我想象的要快。我更新了答案。感謝您指出。 –

如果你使用ES2015（ES6），你可以這樣做。setState（{[id]：{...}）;'。 –

setState也接受一個功能，你可能會發現更直觀

function add(user) { 
    this.setState(users => { 
    users[ user.id ] = user 
    return users 
    } 
} 

function remove(id) { 
    this.setState(users => { 
    delete users[ id ] 
    return users 
}

這些功能假定您state對象是你的users對象，如果它實際上是state.users然後你必須選擇users出去，傳遞函數setState將永遠被稱爲傳遞實際的state對象。

在這個例子中，add也可以用來修改，這取決於你的實際使用情況，你可能想創建單獨的幫助器。

來源

2016-04-15 16:17:54

除了_.extend您可以使用Map存儲user

let user = new Map(); 
user.set(4, { id: 4, name: "Jane" }); //adds with id (4) as key 
user.myMap.set(2, { id: 2, name: "Peter" }); // set user #2 to "Peter" 
user.delete(3); //deletes user with id 3

來源

2016-05-02 11:33:18

如何在React狀態下更新對象

回答

相關問題