如何在React状态下更新对象

Question

我users在JS对象(不是数组)中有一个索引列表.它是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

这就是我要做的

• 加: var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
• 删除: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);