[英]How to push value in array of objects in loop?
如何在循環中以反應狀態將對象列表中的數組推送?
我的默認狀態:
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]}
您可以使用以下傳播語法來映射和更新狀態:
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
}))
}))
}
您可以使用地圖:
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
)
短篇:
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],
},
],
}));
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.