如何更新数组的元素？

Question

我在 state.allItems 中有一系列产品。 （每个产品都有 ID、标题等）我想通过按钮更改有关元素的信息。 我发送产品的 ID。

认为我在突变中做错了什么。 行动：

UPDATE_PRODUCT({commit}, id){
    const token = localStorage.getItem('token');
    return axios.request({
        url: '`{url}`',
        method: 'put',
        data: {id:id},
        headers: { Authorization: `Bearer ${token}` }
    })
        .then((resp)=>{
            commit('UPDATE_PRODUCT_IN_STATE', resp)
            alert('Товар успешно изменен!')
            console.log(resp)
            return resp;
        })
        .catch((error)=>{
            console.log(error)
            return error;
        })
},

突变：

UPDATE_PRODUCT_IN_STATE: (state, id)=>{
    state.allItems = state.allItems.map(i=>i.id===id)
},

Answer 1

要知道您尝试实现的目标并不容易，但在这里：

我猜您的 map 方法将返回一个如下所示的数组： [false, false, true, false...]这是因为state.allItems.map(i => i.id === id)将比较每个项目在state.allItems中，并根据当前项目id是否与作为参数发送的id匹配返回true或false 。

看看这个： https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

我猜你现在正在使用 vuex。 如果你的“resp”是一个新项目，我想你要做的就是用新项目“resp”替换 allItems 中具有相同 id 的旧项目。

一种简单的存档方法是通过数组拼接 function 。

以下内容应该可以帮助您实现目标。

UPDATE_PRODUCT_IN_STATE: (state, resp) => {
    const { id } = resp;
    const toUpdateIndex = state.allItems.findIndex(el => el.id === id)
    if(toUpdateIndex === -1) return state;
    state.allItems.splice(toUpdateIndex,1,resp);
},