Svelte中Writable对象数组的嵌套数组更新问题

问题场景 #

你使用包含对象数组的Svelte writable，每个对象嵌套models数组，想要给指定公司的models添加新模型。你的writable定义如下：

export const dummyCarsData = writable([
    { id: 1, company: "volkswagen", models: ["Polo GT", "Tiguan"] },
    { id: 2, company: "BMW", models: ["M2", "X3",] },
])

你尝试了以下代码但触发类型错误：

const handleAddCar = () => { 
  data.companyDetails.models.push(newCar); 
  dummyCarsData.update((currentData) => [...currentData,currentData[0].models: [...currentData[0].models,newCar]] ); 

  console.log(data.companyDetails,$dummyCarsData);
}

错误信息：

[{
    "resource": "/home/mohdasim/code/myapp/src/routes/details/[companyId]/+page.svelte",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "2322",
    "severity": 8,
    "message": "Type 'string[] | { id: number; company: string; models: string[]; } | [...string[], string]' is not assignable to type '{ id: number; company: string; models: string[]; }'.\n  Type 'string[]' is missing the following properties from type '{ id: number; company: string; models: string[]; }': id, company, models",
    "source": "js",
    "startLineNumber": 13,
    "startColumn": 42,
    "endLineNumber": 13,
    "endColumn": 56
}]

错误原因 #

1. update方法里的语法完全错误：你试图在数组展开后直接插入currentData[0].models: ...这种对象键值对，导致数组元素类型混乱，触发类型不匹配错误。
2. 直接调用push修改原数组不符合Svelte响应式规则：writable需要依赖引用变化触发更新，直接修改原数据不会触发视图更新。

正确解法 #

要更新嵌套的models数组，需要遵循immutable原则，返回新的数组和对象引用：

方法1：给指定ID的公司添加模型 #

const handleAddCar = () => {
  dummyCarsData.update(currentData => {
    // 遍历数组，找到目标公司并返回新对象，其他对象保持不变
    return currentData.map(car => {
      if (car.id === 1) { // 这里替换成你要匹配的公司ID
        // 复制原对象，替换models为新数组（原数组+新模型）
        return { ...car, models: [...car.models, newCar] };
      }
      return car;
    });
  });
};

方法2：给当前选中的公司（如data.companyDetails）添加模型 #

如果你的data.companyDetails是当前选中的公司对象，可以通过ID匹配更新：

const handleAddCar = () => {
  dummyCarsData.update(currentData => {
    return currentData.map(car => {
      // 匹配当前选中公司的ID
      if (car.id === data.companyDetails.id) {
        return { ...car, models: [...car.models, newCar] };
      }
      return car;
    });
  });
};

关键说明 #

• 必须通过update方法返回新的数组引用，Svelte才能检测到变化并更新视图。
• 修改目标公司对象时，要返回新的对象实例（用展开运算符...car复制原属性），同时替换models为新的数组（[...car.models, newCar]），不能直接修改原对象的models数组。
• 移除之前的data.companyDetails.models.push(newCar)代码，所有更新逻辑都通过dummyCarsData.update完成。

内容的提问来源于stack exchange，提问作者Aasim Taifullah