如何在循环中推送对象数组中的值?
Posted
技术标签:
【中文标题】如何在循环中推送对象数组中的值?【英文标题】:How to push value in array of objects in loop? 【发布时间】:2019-06-25 20:04:03 【问题描述】:如何在循环中以反应状态推送对象列表中的数组?
我的默认状态:
this.state =
users: [
id:1,
name: 'John'
,
id:2,
name: 'Nick'
]
;
我尝试了类似的方法,但它不起作用
changeHandler (currentUser, newValue)
const users = this.state.users;
for (var i in users)
if (users[i].id == currentUser)
this.setState(
users: [...this.state.users[i], newValue: newValue]
)
break;
所以我希望看到:
default state - id:1,name: 'John',id:2, name: 'Nick'
use changeHandler(2,1) - id:1,name: 'John',id:2, name: 'Nick', newValue: [1]
use changeHandler(2,2) - id:1,name: 'John',id:2, name: 'Nick', newValue: [1,2]
use changeHandler(2,3) - id:1,name: 'John',id:2, name: 'Nick', newValue: [1,2,3]
【问题讨论】:
【参考方案1】:您可以使用扩展语法来映射和更新状态
changeHandler (currentUser, newValue)
const users = this.state.users;
this.setState(prevState => (
users: prevState.users.map((user =>
if (user.id == currentUser)
return
...user,
newValue: [...(user.newValue || []), newValue]
return user
))
))
【讨论】:
【参考方案2】:你可以使用地图:
this.state.users.map(
(user)=>user.id===currentUser
//if user id is current user then copy user to new object ...user
//set newValue to user.newValue or empty array newValue:(user.newValue||[])
//add the newValue to user.newValue: .concat(newValue)
? ...user,newValue:(user.newValue||[]).concat(newValue)
//user is is not currentUser, just return the user as is
: user
)
【讨论】:
在 React 中,状态应该是不可变的,你必须使用 setState 方法来更新它。 @mab 是的,完整版是:this.setState(...this.state,users:this.state.users.map(---
【参考方案3】:
短篇:
changeHandler (currentUserId, newValue)
this.setState(( users ) => (
users: users.map(user => (
...user,
...(
user.id === currentUserId
? newValue: [...(user.newValue || []), newValue]
:
),
))
));
长一个:
changeHandler (currentUserId, newValue)
this.setState(( users ) =>
const otherUsers = users.filter( id => id !== currentUserId);
const currentUser = users.find( id => id === currentUserId);
return
users: [
...otherUsers,
...currentUser,
newValue: [
...(currentUser.newValue || []),
newValue
],
,
],
;
);
长一的短版:
changeHandler (currentUserId, newValue)
this.setState(( users ) => (
users: [
...users.filter( id => id !== currentUserId),
...users.find( id => id === currentUserId),
newValue: [...(currentUser.newValue || []), newValue],
,
],
));
【讨论】:
以上是关于如何在循环中推送对象数组中的值?的主要内容,如果未能解决你的问题,请参考以下文章
如何在不使用 for 循环的情况下从 appsettings 文件中读取对象数组中特定键的值