苗条的商店。 Spread 语法不会合并 - 只是添加

Question

我想在我创建的 svelte 商店中添加一些 brocolli 到我的购物篮中。我的代码将 brocooli 添加到篮子中，然后复制篮子并将一个全新的篮子添加到我的商店。不知道这个问题是不是我对javascript 或 svelte.

不了解造成的

想要的结果

Basket 1
 Orange
Pineapple
 
Basket 2
 Banana
Apple
Plum
walnut
hazelnut
nutmeg
broccoli

实际结果

Basket 1

Orange
Pineapple

Basket 2

Banana
Apple
Plum
walnut
hazelnut
nutmeg

Basket 2

Banana
Apple
Plum
walnut
hazelnut
nutmeg
broccoli

Link 到可以查看和运行代码

的精简代码框

https://svelte.dev/repl/80d428000a3f425da798cec3450a59d4?version=3.46.2
如果您单击该按钮，您会看到我的购物篮正在复制。我只是想把花椰菜加到篮子里。

下面的代码

import { writable } from 'svelte/store';
export const storeBaskets = writable([
   {
     "name": "Basket 1",
     "items": ["Orange", "Pineapple"]
   },
   {
     "name": "Basket 2",
     "items": ["Banana", "Apple","Plum","walnut","hazelnut","nutmeg"]
   }
 ])
//Local functions
export const add = (item,basketIndex) => { 
       storeBaskets.update(val => {        
        const newItems = [...val[basketIndex].items, item]
        const newBasket = {'name':val[basketIndex].name,'items':newItems}
        val = [...val,newBasket]
       return val
   })

Answer 1

您可能不需要展开，因为它是一个数组，您正在展开数组的现有项目，然后向其中添加新的篮子。您可以 map 并替换为 basketIndex，例如：

export const add = (item,basketIndex) => { 
        storeBaskets.update(val => {
         const newItems = [...val[basketIndex].items, item]
         const newBasket = {'name':val[basketIndex].name,'items':newItems}
         
        return val.map((basket, i) => i === basketIndex ? newBasket : basket)
    })
}

(Working example)

Answer 2

val = [...val,newBasket]

通过这一行，您将复制之前的存储值并在“顶部”添加新的篮子。这就是展开运算符与数组一起工作的方式

let arr = [1,2,3]
let n = 4

let arr2 = [...arr, n]

console.log(arr2) // [ 1 , 2 , 3 , 4 ]

我想知道您是否考虑过传播对象时的不同行为，如果密钥已经存在，则可能会覆盖已经存在的条目

let obj = {key: 'value'}
let key = 'newValue'

let obj2 = {...obj, key}

console.log(obj2) // { key: "newValue" }

为了使您的代码正常工作，您可以将此行替换为 val[basketIndex] = newBasket

export const add = (item,basketIndex) => { 
    storeBaskets.update(val => {        
        const newItems = [...val[basketIndex].items, item]
        const newBasket = {'name':val[basketIndex].name,'items':newItems}
        val[basketIndex] = newBasket
        return val
    })
}

或者，不传播，只需将新值直接推送到相应的一行中的嵌套数组

export const add = (item,basketIndex) => { 
        storeBaskets.update(val => {        
        val[basketIndex].items.push(item)
        return val
    })
}

苗条的商店。 Spread 语法不会合并 - 只是添加

Svelte Store. Spread syntax is not merging - just adding

store

svelte

Link 到可以查看和 运行 代码

Link 到可以查看和运行代码