篮子1
吊篮2
吊篮1 吊篮2 吊篮2
我正试图在我创建的苗条商店的篮子里添加一些brocolli。我的代码将brocooli添加到购物篮中，但随后复制购物篮并将一个全新的购物篮添加到我的商店中。不确定这个问题是由我对javascript或svelte缺乏理解引起的。
所需结果
- 橙色
- 菠萝
- 香蕉
- 苹果
- 梅花
- 胡桃
- 榛子
- 肉豆蔻
- 花椰菜
实际结果
- 橙色
- 菠萝
- 香蕉
- 苹果
- 梅花
- 胡桃
- 榛子
- 肉豆蔻
- 香蕉
- 苹果
- 梅花
- 胡桃
- 榛子
- 肉豆蔻
- 花椰菜
链接到svelte代码箱，您可以在其中查看和运行代码
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
})
val = [...val,newBasket]
通过这一行，您复制了以前的存储值并添加了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
})
}
您可能不需要展开，因为它是一个数组，您需要展开数组的现有项，然后向其中添加新的购物篮。您可以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)
})
}
(工作示例(