如何在 React 状态下更新对象答案

【问题标题】：How to update object in React state如何在 React 状态下更新对象
【发布时间】：2016-08-07 15:05:15
【问题描述】：

我在 JS 对象（不是数组）中有一个 users 的索引列表。它是 React 状态的一部分。

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

最佳做法是：

添加一个新用户 { id: 4, name: "Jane" }，id (4) 作为键
删除 id 为 2 的用户
将用户 #2 的名称更改为“Peter”

没有任何不可变的助手。我正在使用 Coffeescript 和 Underscore（所以 _.extend 没问题...）。

谢谢。

【问题讨论】：

标签： javascript reactjs coffeescript

【解决方案1】：

这就是我要做的事情

添加：var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
删除：var newUsers = _.extend({}, users) 然后delete newUsers['2']
更改：var newUsers = _.extend({}, users) 然后newUsers['2'].name = 'Peter'

【讨论】：

这是正确的答案。使用 extend 创建一个新对象，然后进行变异。
我同意，但是在“更改”的情况下，我们还必须复制修改后的用户对象，如下所示： var newUser = _.extend({}, users['2'], { name: '彼得' }); var newUsers = _.extend({}, users, { 2: newUser });
@pierrepinard_2 好点子，这使得 shouldComponentUpdate 更适合显示个人用户的组件。

【解决方案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);

【讨论】：

您的 addUser 方法将使用键 id 更新对象，而不是按照 OP 的指定添加键为 4 的对象。 changeName 也有同样的问题。
你是对的。我猜我打字的速度比我想象的要快。我更新了答案。感谢您指出。
如果您使用的是 ES2015 (ES6)，您可以使用 this.setState({ [id]: { ... });。
请注意，这些方法不是一成不变的。你正在直接改变this.state。似乎 OP 希望“没有任何不可变的助手”保持不可变
这些正在改变状态对象。正确答案是stackoverflow.com/a/36650760/1536309

【解决方案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

【讨论】：

【解决方案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，将一个函数传递给@ 987654327@ 将始终被称为传递实际的 state 对象。

在此示例中，add 也可用于修改，根据您的实际用例，您可能需要创建单独的帮助程序。

【讨论】：

【解决方案5】：

使用点差：

添加

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

删除 id 2

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

更改 id 2

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

【讨论】：