如何更改嵌套在数组中 object 数组中的 object 的状态/setState？
[英]How would I change the state/setState of an object nested in an array of an object in an array?
问题描述
我正在寻找使用object的setState更新数据数组的最佳方法， collections数组中的名称为sms_group 。
我想这样做并保持所有其他对象相同。
我想在不引用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'
},
{
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
}
]
}
]
}
我正在寻求改变：
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
}
]
至
data: [
{
id: 1,
name: 'Harrietta Souten',
status: 'Traditional heading elscas sdscsd sdcsdsc',
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
}
]
3 个解决方案
解决方案1
2 2019-11-21 22:01:49
你可以试试这个：
const updateSmsGroups = () =>
return state.collections.map( c => {
if(c.name === 'sms_groups'){
//Just make your modifications here
c.new_group = true
}
return c
} );
}
解决方案2
1 2019-11-21 22:00:57
无论如何，您必须提供一个标识符来更新collections数组中的正确 object。
让我们试试这个名字。
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 })
解决方案3
0 2019-11-21 22:15:02
这个问题已经得到了大部分的回答，但是很多人错过了创建变量的副本。 在此处查看此答案： Updating an object with setState in React
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>
setstate object:{array:[]} in reactjs 如何在 state 对象**中的数组中添加**键和值？
[英]setstate object:{array:[]} in reactjs how could i add the **key and value inside the array which is in the state object**?
reactJS 对象的状态数组 - 如何在 setState() 中引用状态数组对象
[英]reactJS state array of objects - how do I reference the state array object in setState()
我如何setObject.item [n]的状态嵌套在数组中，而该数组嵌套在对象数组中
[英]How do I setState of object.item[n] nested within array which is nested within an array of objects
如何使用 onChange 和 setState() 将事件目标推送到 state 中数组中的 object
[英]How to push event targets to an object in an array in state with onChange and setState()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在反应中为嵌套的对象数组设置状态？
如何将 setState 与嵌套的 JSON 数组对象一起使用
setstate object:{array:[]} in reactjs 如何在 state 对象**中的数组中添加**键和值？
reactJS 对象的状态数组 - 如何在 setState() 中引用状态数组对象
我如何setObject.item [n]的状态嵌套在数组中，而该数组嵌套在对象数组中
如何设置状态并将对象推送到数组？
如何将嵌套对象更改为数组
如何使用 onChange 和 setState() 将事件目标推送到 state 中数组中的 object
SetState将新数据推送到状态数组对象
反应不使用带有 object 数组的 setState 更新 state
相关标签