如何在 React 状态下更新对象

Posted 2023-03-03

【中文标题】如何在 React 状态下更新对象

【英文标题】：How to update object in React state

【发布时间】：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 没问题...）。

谢谢。

【参考方案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 希望“没有任何不可变的助手”保持不可变

这些正在改变状态对象。正确答案是***.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",