为什么我不能用Zustand展开一组对象呢？

Question

我在一个使用类型记录的Nextjs应用程序中使用Zustand，出于某种原因，每当我试图迭代我的state对象时，我都会得到一条运行时错误消息。

我的汽车损坏区域的结构是：

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: [
    ],

所以，假设我向我的"front_door“数组添加了一个新的对象，这里是我的zustand存储和函数:在下面的代码中，动态支柱”区域“将是我的damagedZones对象的”左“键，而动态支柱”元素“将是我的"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
          ]
        }
      }
    }))
  },
}))

因此，基本上，当我触发这个函数时，我会得到一个运行时错误，它说：

TypeError:传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须有一个Symbol.iterator方法.

我不明白为什么.我尝试过使用一个对象而不是一个以id作为键的数组，它工作得很好，但是并不是非常方便，所以在这种情况下数组是最好的，但是它的性能并不像预期的那样.

Answer 1

好吧，我想出来了，这是因为我对我的damagedZone对象的类型错误了！我忘了提到一个键是数组:)

既然我的对象类型如下所示，它就可以工作了：

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
}

现在这里是useDamagedZones商店：

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)
        }
      }
    }))
  }
}))