Estoy usando Zustand en una aplicación Nextjs usando Typescript. Por alguna razón, recibo un mensaje de error en tiempo de ejecución cada vez que intento iterar en mi objeto de estado.
La estructura del objeto de la zona dañada de mi automóvil es:
const damagedZones = { Left: { front_door:[ { id: 1 picture1: 'picture 1 base64 string', picture2: 'picture 2 base64 string', comment: 'any comment' }, { id: 2 picture1: 'picture 1 base64 string', picture2: 'picture 2 base64 string', comment: 'any comment' } ], back_door: [ ],entonces, imagine que agrego un nuevo objeto a mi matriz "front_door", aquí está mi tienda y función zustand: En el código a continuación, la "zona" de apoyo dinámico sería mi tecla "Izquierda" de mi objeto de zonas dañadas, y el apoyo dinámico "elemento" sería mi clave "front_door".
export const useDamagedZones = create<DamagedZonesProps>((set) => ({ damagedZones: damagedZones, setDamagedZones: (elementItem: damagedItem, zone: string, element: string) => { set(state => ({ damagedZones: { ...state.damagedZones, [zone]: { ...state.damagedZones[zone], [element]: [ ...state.damagedZones[zone]?.[element], elementItem ] } } })) }, }))así que, básicamente, cuando activo esta función, aparece un error de tiempo de ejecución que dice:
TypeError: intento no válido de difundir una instancia no iterable. Para ser iterables, los objetos que no son de matriz deben tener un método Symbol.iterator.
No entiendo por qué es así... He intentado usar un objeto en lugar de una matriz, con una identificación como clave, y funciona bien, pero no es muy conveniente, por lo que una matriz es lo mejor en esta situación. pero no funciona como se esperaba....
Muy bien, lo descubrí, ¡es porque confundí mis tipos de escritura mecanografiada para mi objeto de zona dañada! Olvidé mencionar que una clave sería una matriz :)
funciona ahora que mi tipo de objeto es así:
type damagedItem = { id?: number picture1?: string | null, picture2?: string | null, picture3?: string | null, comment?: string, } type DamagedElement = { [key: string]: damagedItem[] } type DamagedZone = { step1_gauche: DamagedElement, step1_droite: DamagedElement, step1_avant: DamagedElement, step1_arriere: DamagedElement }y aquí está la tienda useDamagedZones por ahora:
export const useDamagedZones = create<DamagedZonesProps>((set) => ({ damagedZones: damagedZones, setDamagedZones: (elementItem: damagedItem, zone: string, element: string) => { set(state => ({ damagedZones: { ...state.damagedZones, [zone]: { ...state.damagedZones[zone], [element]: [ ...state.damagedZones[zone]?.[element], elementItem ] } } })) }, removeDamagedItem : (zone: string, element: string, id: number ) => { set(state => ({ damagedZones: { ...state.damagedZones, [zone]: { ...state.damagedZones[zone], [element]: state.damagedZones[zone]?.[element].filter(el => el.id !== id) } } })) } }))