Tengo una matriz complicada de objetos y quiero cambiar una propiedad que está profundamente anidada en la matriz.
Hice la siguiente función y funciona, pero el problema es que el eslint me arroja un error porque hay un ternero anidado para verificar si estoy en el lugar correcto en una matriz:
toggleSwitchDetector(state: Array<IOpticalHeadUnit>, { payload }: any) { return [ ...state.map((opticalHeadUnit) => opticalHeadUnit.name === payload.opticalHeadUnitName ? { ...opticalHeadUnit, detectors: [ ...opticalHeadUnit.detectors.map( (detector, index) => ({ ...detector, status: { ...detector.status, value: //Nested ternery. Bad practice. index === payload.index ? detector.status .value === 0 ? 1 : 0 : detector.status.value, }, }), ), ], } : opticalHeadUnit, ), ]; }¿Existe una forma más sencilla de abordar la modificación de la propiedad profundamente anidada?
EDITAR:
el código después de que lo modifiqué con las respuestas:
const getDetectorStatusValue=(index:number,payload:number,detector:IDetector)=>{ if(index === payload) { if(detector.status.value===0) return 1 return 0 } return detector.status.value } toggleSwitchDetector(state: Array<IOpticalHeadUnit>, { payload }: any) { return state.map((opticalHeadUnit) => opticalHeadUnit.name === payload.opticalHeadUnitName ? { ...opticalHeadUnit, detectors: [ ...opticalHeadUnit.detectors.map( (detector,index) => ({ ...detector, status: { ...detector.status, value:getDetectorStatusValue(index,payload.index,detector) }, }), ), ], } : opticalHeadUnit, );Si desea deshacerse del operador ternario anidado, puede escribir un poco más de código, pero será más legible.
Puede verificar si index === payload.index con una if statement simple y solo en ese caso profundizar en su objeto para eventualmente verificar detector.status.value === 0 ? 1 : 0
De lo contrario, simplemente devuelva el detector tal como está;
...opticalHeadUnit.detectors.map( (detector, index) => ({ if (index === payload.index) { return { ...detector, status: { ...detector.status, value: detector.status.value === 0 ? 1 : 0 }, } } else { return detector; } }), ),Tal vez algo como esto
toggleSwitchDetector(state: Array<IOpticalHeadUnit>, { payload }: any) { return state.map((opticalHeadUnit) => getState(payload, opticalHeadUnit) } getStatus(payload, detector) { return { ...detector.status, value: //Nested ternery. Bad practice. index === payload.index ? detector.status .value === 0 ? 1 : 0 : detector.status.value, }; } getDetectors(payload, opticalHeadUnit) { return opticalHeadUnit.detectors.map( (detector, index) => ({ ...detector, status: getStatus(payload, detector), }), ); } getState(payload, opticalHeadUnit) { opticalHeadUnit.name === payload.opticalHeadUnitName ? { ...opticalHeadUnit, detectors: getDetectors(payload, opticalHeadUnit); } : opticalHeadUnit, }no necesita [...array], reemplácelo con array