亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何更改嵌套在數組中的對象數組中的對象的狀態/setState？

如何更改嵌套在數組中的對象數組中的對象的狀態/setState？

鳳凰求蠱 2022-01-07 16:54:24
我要尋找更新的數據陣列的最佳方法setState的object名稱為sms_group內部collections數組。我想這樣做并保持所有其他對象相同。我想在不引用collection [2]之類的集合索引的情況下執行此操作。有沒有人有什么建議？class SomeComponent extends React.Component {   constructor(props) {      super(props);      this.state={                 collections: [                {                   id: 1,                   name: 'messages',                   label: 'Messages',                   new_group: true,                   new_chat: true,                   new_friend: false,                   data: [                      {                         id: 1,                         name: 'Patsy Paulton',                         status: 'Traditional heading elscas sdscsd sdcsdsc',                         imageUrl: 'https://via.placeholder.com/150',                         newMessage: true,                         newMessageCount: 2,                         avatarStatus: 'avatar-state-success'                      },                      {                         id: 2,                         name: 'Karl Hubane',                         status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',                         imageUrl: 'https://via.placeholder.com/150',                         newMessage: false                      },                      {                         id: 3,                         name: 'Entertainment Group',                         status: '<strong>Maher Ruslandi: </strong>Hello!!!',                         imageUrl: 'https://via.placeholder.com/150',                         newMessage: false                      },                      {                         id: 4,                         name: 'Jennica Kindred',                         status: 'I know how important this file is to you. You can trust me ;)',                         imageUrl: 'https://via.placeholder.com/150',                         newMessage: false,                         avatarStatus: 'avatar-state-warning'                      },
查看完整描述

3 回答

?
達令說

TA貢獻1821條經驗 獲得超6個贊

你可以試試這個：


const updateSmsGroups = () =>

 return state.collections.map( c => {

  if(c.name === 'sms_groups'){

    //Just make your modifications here

    c.new_group = true

   }

   return c

 } );

}


查看完整回答
反對 回復 2022-01-07
?
翻翻過去那場雪

TA貢獻2065條經驗 獲得超14個贊

無論如何，您必須提供一個標識符來更新您的集合數組中的正確對象。


讓我們試試這個名字。


const { collections } = this.state


const updatedCollections = collections.reduce((acc, curr) => {

  if ( curr.name === 'sms_group' ) {

    // Update yourobject here

    curr.name = 'new_sms_group' // for example

    return [ ...acc, curr ]

  }


  return acc

}, [])


// or you can simply iterate on your collections array with map


const updatedCollections = collections.map(collection => {

  if ( collection.name === 'sms_group') {

    collection.name = 'new_sms_group'

  }

  return collection

}


this.setState({ collections: updatedCollections })


查看完整回答
反對 回復 2022-01-07
?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

這個問題已經得到了大部分的回答，但是很多人錯過了創建變量的副本。在此處查看此答案：在 React 中使用 setState 更新對象


this.state ={

             collections: [

            {

               id: 1,

               name: 'messages',

               label: 'Messages',

               new_group: true,

               new_chat: true,

               new_friend: false,

               data: [

                  {

                     id: 1,

                     name: 'Patsy Paulton',

                     status: 'Traditional heading elscas sdscsd sdcsdsc',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: true,

                     newMessageCount: 2,

                     avatarStatus: 'avatar-state-success'

                  },

                  {

                     id: 2,

                     name: 'Karl Hubane',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 3,

                     name: 'Entertainment Group',

                     status: '<strong>Maher Ruslandi: </strong>Hello!!!',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 4,

                     name: 'Jennica Kindred',

                     status: 'I know how important this file is to you. You can trust me ;)',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false,

                     avatarStatus: 'avatar-state-warning'

                  },

                  {

                     id: 5,

                     name: 'Marvin Rohan',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 6,

                     name: 'Frans Hanscombe',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  }

               ]

            },

            {

               id: 2,

               name: 'sms_groups',

               label: 'SMS Groups',

               new_group: false,

               new_chat: false,

               new_friend: true,

               data: [

                  {

                     id: 1,

                     name: 'Harrietta Souten',

                     status: 'Traditional heading elscas sdscsd sdcsdsc',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 2,

                     name: 'Aline McShee',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 3,

                     name: 'Brietta Blogg',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 4,

                     name: 'Karl Hubane',

                     status: 'I know how important this file is to you. You can trust me ;)',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 5,

                     name: 'Jillana Tows',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 6,

                     name: 'Alina Derington',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 7,

                     name: 'Stevy Kermeen',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 8,

                     name: 'Gloriane Shimmans',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 9,

                     name: 'Bernhard Perrett',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  }

               ]

            },

            {

               id: 3,

               name: 'phone_numbers',

               label: 'Phone Numbers',

               new_group: false,

               new_chat: false,

               new_friend: false,

               data: [

                  {

                     id: 1,

                     name: 'Jennica Kindred',

                     status: 'Traditional heading elscas sdscsd sdcsdsc',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 2,

                     name: 'Marvin Rohan',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 3,

                     name: 'Frans Hanscombe',

                     status: 'Lorem ipsum dolor sitsdc sdcsdc sdcsdcs',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  },

                  {

                     id: 4,

                     name: 'Karl Hubane',

                     status: 'I know how important this file is to you. You can trust me ;)',

                     imageUrl: 'https://via.placeholder.com/150',

                     newMessage: false

                  }

               ]

            }

         ]

};



// create a copy of your state

const collections = Object.assign([], this.state.collections);

// do your changes

collections.forEach(cl => {

   if(cl.name === 'sms_groups') {

       // put your new data object here

       cl.data={};

   }

});


//this.setState({collections});

console.log(collections);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


查看完整回答
反對 回復 2022-01-07
  • 3 回答
  • 0 關注
  • 247 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號