如何向Svelte writable store追加数组元素并避免嵌套问题

基础问题排查 #

首先你最初使用flights.set({ ...flights, input })无法追加元素的原因很简单：flights是writable创建的store实例对象，不是store内部存储的数组值，直接展开实例拿不到原有存储内容，所以最终只会把input存进去覆盖所有内容。
直接打印store实例得到空对象{}也是同样的原因，store内部的值必须通过update回调参数、get方法或者组件内的$语法糖才能获取。
你之前写的单个数组追加逻辑可以生效，但直接在回调里用push修改原数组不符合不可变更新规范，极端场景下可能丢失响应性，更推荐用展开运算符写法：

// 原写法可生效但不推荐
unconfirmed_flights.update((data) => {
  data.push(input)  
  return data
})

// 推荐写法
unconfirmed_flights.update((data) => [...data, input])

嵌套数组问题原因 #

你最终出现[[...]]二层嵌套的核心原因：unconfirmed_flights.update的回调参数uplan本身就是store里存的完整数组（也就是你打印出来的[{json_object}, {json_object}]），你直接把整个数组作为单个元素push到data[id]数组里，自然会形成嵌套。
省略初始化步骤报push is not a function是因为你初始定义的flights是数组结构，而实际使用时把它当成了{[id]: 数组}的对象结构，没有初始化的话data[id]是undefined，自然没有push方法。

正确实现代码 #

不要嵌套调用两个store的update方法，先取到unconfirmed_flights的全量值，再展开追加到对应id下即可，需要先从svelte/store导入get工具方法：

import { writable, get } from 'svelte/store'

// 用户点击确认后执行以下逻辑
const uplanList = get(unconfirmed_flights)
flights.update((data) => {
  // 兼容未初始化场景，不需要单独写初始化逻辑
  const targetList = Array.isArray(data[id]) ? data[id] : []
  return {
    ...data,
    // 把待追加的数组展开，不要直接push整个数组
    [id]: [...targetList, ...uplanList]
  }
})
// 如果确认后需要清空待确认列表，执行这行
unconfirmed_flights.set([])

如果是在.svelte组件内，可以直接用$语法糖拿store值，写法更简洁：

flights.update((data) => {
  const targetList = Array.isArray(data[id]) ? data[id] : []
  return {
    ...data,
    [id]: [...targetList, ...$unconfirmed_flights]
  }
})
$unconfirmed_flights = []

内容的提问来源于stack exchange，提问作者Ángel Fas