如何在循环中推送对象数组中的值?

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],
      ,
    ],
  ));

【讨论】:

以上是关于如何在循环中推送对象数组中的值?的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应中推送 JSON 对象数组中的项目?

如何推送对象值而不是数组中对象的引用

如何在不使用 for 循环的情况下从 appsettings 文件中读取对象数组中特定键的值

Javascript将数组添加到数组对象 - 问题总是推送相同的值

在javascript中搜索对象中的值[关闭]

从对象数组中推入数组中的值