Tengo estos:
export type DataItemChild = { id: number; title:string; checked?: boolean; };Tenga en cuenta que los subelementos pueden no estar definidos aquí:
export type DataItems = { id: number; title:string; subItems?: Array<DataItemChild>; checked?: boolean; }; export const initalState: StateType = { items: [], date: new Date(), };Hasta ahora he descubierto cómo actualizar la matriz en un objeto de nivel superior como:
case ActionKind.Checked: newArrayChecked = state.items.map((item) => ({ ...item, checked: item.id === payload.id ? true : item.checked, })); return { ...state, items: newArrayChecked, };No puedo averiguar cómo actualizar los subelementos. tengo esto (desmontado)
export const reducer = (state: StateType, action: Action) => { const { type, payload } = action; let newArrayChildCheck: Array<DataItemChild> = [] switch (type) { case ActionKind.UnCheckedSub: newArrayChildCheck = state.items.map((item) => ({ ...item.subItems?.map((sub, index) => ({ checked: sub.id === payload.subItems?[index].id ? true: sub.checked })), })); return { ...state, items.subItems: newArrayChildCheck, }; default: return state; } };Pero esto me da un error de mecanografía que dice que mi newArrayChildCheck no es compatible con undefined. Error completo:
Escriba '{ [x: número]: { marcado: booleano | indefinido; }; ¿longitud?: número | indefinido; toString?: (() => cadena) | indefinido; toLocaleString?: (() => cadena) | indefinido; pop?: (() => { marcado: booleano | indefinido; } | indefinido) | indefinido; ... 29 más ...; [Símbolo.unscopables]?: (() => { ...; }) | indefinido; }[]' no se puede asignar al tipo 'DataItemChild[]'. Escriba '{ [x: número]: { marcado: booleano | indefinido; }; ¿longitud?: número | indefinido; toString?: (() => cadena) | indefinido; toLocaleString?: (() => cadena) | indefinido; pop?: (() =
EDITAR:
después de la respuesta de @Kelvin Schoofs, me di cuenta de que estaba enviando un objeto completo que tiene sus subelementos. la carga útil es de tipo DataItems
Modifiqué mi intento de acuerdo con la sugerencia de @Kelvin Schoofs con un pequeño giro:
newArrayChildCheck = state.items.map((item) => ({ ...item, subItems: item.subItems?.map((sub, index) => ({ ...sub, checked: sub.id === payload.subItems[index].id ? true : sub.checked })), No el [index]
pero estoy recibiendo
el objeto es posible indefinido
Parece que estás difundiendo mal tu nuevo objeto. Su .map((item) => ...) devuelve un objeto, pero en él distribuye una matriz (potencial), que solo completaría claves numéricas (bueno, versiones en cadena). Probablemente quiso copiar los campos originales del item , como id y title , y asignar el resultado de los subItems asignados al campo de subItems . Idem para el objeto que creas en tus subItems?.map . Algo como esto es de tipo correcto:
newArrayChildCheck = state.items.map((item) => ({ ...item, subItems: item.subItems?.map((sub) => ({ ...sub, checked: sub.id === payload.id ? true : sub.checked })), })); Eso es si desea una versión alterada de su matriz DataItems . Si realmente desea devolver cada DataItemChild con la versión checked alterada, puede usar flatMap de esta manera:
newArrayChildCheck = state.items.flatMap((item) => item.subItems?.map((sub) => ({ ...sub, checked: sub.id === payload.id ? true : sub.checked })), );