0
122
VistasEstado de actualización con matriz anidada de objetos sin mutación
Estoy tratando de actualizar mi estado. Quiero poder actualizar una propiedad isChecked específica cuando se actualiza cuando un usuario hace clic en una casilla de verificación. Mi estado a continuación:
this.state = { userPermissions: [ { appName: "Dashboard", roles: [ { appId: "1", statusId: 1, isChecked: false }, { appId: "1", statusId: 2, isChecked: true }, ] }, { appName: "Finance", roles: [ { appId: "2", statusId: 3, isChecked: false }, { appId: "2", statusId: 4, isChecked: true }, ] } ] }Esto es lo que he probado. Tengo que mapear dos veces para llegar a los roles y luego establecer las condiciones, sin embargo, asumo que estoy mutando el estado con otro nuevo, así que cuando lo renderizo, se rompe.
handleCheck = (e, data) => { const checked = e.target.checked; this.setState(prevState => ({ userPermissions: prevState.userPermissions .map(item => item.roles .map(item => item.appId === data.appId && item.statusId === data.statusId ? { ...item, isChecked: checked } : item)) })) }¿Hay una forma más limpia de hacer esto sin mutación? Gracias.
3 Respuestas
Responde la pregunta0
let state = { keys: ['Finance', 'Dashboard'], Finance: [ { appId: '2', statusId: 3, isChecked: false, }, { appId: '2', statusId: 4, isChecked: true, }, ], Dashboard: [ { appId: '1', statusId: 1, isChecked: false, }, { appId: '1', statusId: 2, isChecked: true, }, ], }; this.setState(prev => { let Finance = prev.Finance.map(item => item.appId === data.appId && item.statusId === data.statusId ? { ...item, isChecked: checked } : item ); let Dashboard = prev.Dashboard.map(item => item.appId === data.appId && item.statusId === data.statusId ? { ...item, isChecked: checked } : item ); return { keys: prev.keys, Finance, Dashboard, }; });Cambié su estructura de estado, creo que es más legible y puede leer el objeto de estado y depurarlo mucho mejor
0
su objeto cambia a esto después de ejecutarlo a través de sus mapas 
this.setState((state) => { const { userPermissions } = state; const index = userPermissions.findIndex(e => e.roles.findIndex(ee => ee.appId === "1")!= -1) const roleIndex = userPermissions[index].roles.findIndex(role => role.appId === "1") return { ...state, userPermissions: [ ...userPermissions.slice(0, index), Object.assign( { ...userPermissions.slice[index] }, { roles: [ ...userPermissions[index].roles.slice(0, roleIndex), Object.assign(userPermissions[index].roles[roleIndex], { isChecked: !userPermissions[index].roles[roleIndex].isChecked }), ...userPermissions[index].roles.slice(roleIndex + 1) ] } ), ...userPermissions.slice(index + 1) ] }; });0
Si alguien tiene problemas con esto en el futuro, he publicado la forma en que lo resolví. Siento que esta es una solución más limpia.
const { userPermissions } = this.state; const { checked } = e.target; //find the app index const appIndex = userPermissions.findIndex(element => element.appName === data.appName); //find the status index const roleIndex = userPermissions[appIndex].roles.findIndex(role => role.statusId=== data.statusId); //create a copy of state let newArr = [...userPermissions]; //make change on isChecked newArr[appIndex].roles[roleIndex] = { ...newArr[appIndex].roles[roleIndex], isChecked: checked }; this.setState({ userPermissions: newArr })