如何在React狀態下更新對象

Question

我在JS對象（不是數組）中有一個索引的users列表。 它是React狀態的一部分。

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

什么是最佳做法：

1. 添加一個新用戶{id：4，名稱：“Jane”}，其中id（4）為關鍵
2. 刪除ID為2的用戶
3. 將用戶＃2的名稱更改為“Peter”

沒有任何不可改變的幫助者。 我正在使用Coffeescript和Underscore（所以_.extend沒問題......）。

謝謝。

Answer 1

這就是我要做的

• add： var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
• remove： var newUsers = _.extend({}, users)然后delete newUsers['2']
• 更改： var newUsers = _.extend({}, users)然后newUsers['2'].name = 'Peter'

Answer 2

如果您不使用Flux，則使用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);

Answer 3

除了_.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

Answer 4

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也可用於修改，具體取決於您的實際用例，您可能需要創建單獨的幫助程序。

Answer 5

使用點差：

添加

this.setState({
  ...this.state,
  4: { id: 4, name: "Jane" },
}

刪除id 2

let prevState = this.state;
let {"2": id, ...nextState} = prevState;
this.setState({
  ...nextState,
}

改變身份2

this.setState({
  ...this.state,
  2: {
    ...this.state["2"],
    name: "Peter",
  }
}