Как отфильтровать вложенный массив с настраиваемым ключом в React / Javascript
Моя государственная ценность
this.state = {
staff: {
ReserveCrew:{
User:[{
id:'1',
name:'RC-FF-1',
user_type:'User',
resource:'ReserveCrew'
},
{
id:'2',
name:'RC-FF-2',
user_type:'User',
resource:'ReserveCrew'
}],
Superadmin:[{
id:'3',
name:'RC-SA-1',
user_type:'Superadmin',
resource:'ReserveCrew'
},
{
id:'4',
name:'RC-SA-2',
user_type:'Superadmin',
resource:'ReserveCrew'
}]
},
Crew1:{
User:[{
id:'5',
name:'C1-FF-1',
user_type:'User',
resource:'Crew1'
},
{
id:'6',
name:'C1-FF-2',
user_type:'User',
resource:'Crew1'
}],
Superadmin:[{
id:'7',
name:'C1-SA-1',
user_type:'Superadmin',
resource:'Crew1'
},
{
id:'8',
name:'C1-SA-2',
user_type:'Superadmin',
resource:'Crew1'
}]
}
}
}
И у меня есть функция для изменения типа пользователя и ресурса конкретного человека с его идентификатором. Я пытаюсь заменить user_type на User и resource на ReserveCrew с id=7 и сохранить с полным значением состояния.
Моя функция handleChangeEvent
handleChangeEvent() {
let staff = this.state.staff.filter((item) => {
if (item.id == '7') {
item.resource = 'ReserveCrew'
item.user_type = 'User'
}
return item;
});
this.setState({ ...this.state, staff })
}
Какие изменения мне нужно сделать, чтобы это успешно работало для вложенного массива с настраиваемыми ключами?
Ошибка связана с функцией фильтра, так как состояние представляет собой вложенный массив с настраиваемыми ключами.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку я еще не могу комментировать, я опубликую его здесь.
Сначала, когда вы делаете this.state.staff.filter((item) => ......, он будет проходить только через первый слой, поэтому item будет ReserveCrew, а затем Crew1.
Поскольку ReserveCrew и Crew1 являются объектами с User и Superadmin, у них нет свойства id. Таким образом, вы должны отфильтровать (пропустить) каждый User и Superadmin для ReserveCrew и Crew1. Это сделает код менее читабельным.
На мой взгляд, я бы поместил всех пользователей в массив, поскольку каждый пользователь уже определяет, суперадмин он или нет, и то же самое для ресурса;
так например:
this.state = {
staff: [
{
id:'1',
name:'RC-FF-1',
user_type:'User',
resource:'ReserveCrew'
},
{
id:'2',
name:'RC-FF-2',
user_type:'User',
resource:'ReserveCrew'
},
{
id:'3',
name:'RC-SA-1',
user_type:'Superadmin',
resource:'ReserveCrew'
},
{
id:'4',
name:'RC-SA-2',
user_type:'Superadmin',
resource:'ReserveCrew'
},
{
id:'5',
name:'C1-FF-1',
user_type:'User',
resource:'Crew1'
},
{
id:'6',
name:'C1-FF-2',
user_type:'User',
resource:'Crew1'
},
{
id:'7',
name:'C1-SA-1',
user_type:'Superadmin',
resource:'Crew1'
},
{
id:'8',
name:'C1-SA-2',
user_type:'Superadmin',
resource:'Crew1'
}
]
}
теперь, если вы хотите сменить пользователя, вы можете отфильтровать this.state.staff с той же функцией handleChangeEvent(), что и у вас.
Надеюсь, вы понимаете мой ломаный английский :)
Просто подсказка React, вам не нужно использовать
...this.stateнаthis.setState, вы можете записать толькоthis.setState({ staff }). React объединит переданный объект с фактическим состоянием.