javascript - 使用重复的react-redux从数组中删除特定元素

Question

嗯，我有这个 reducer ，它有 2 个操作:添加项目和删除项目。添加项目工作正常，但问题在于删除项目，当我使用过滤方法时，它将删除所有具有相同名称的项目(重复)，但我只想删除单击的元素。

我尝试使用拼接方法，将项目索引作为有效负载而不是名称传递，创建与购物篮项目相同的新数组，并将拼接方法应用于该数组，但问题是当我将新数组分配给购物篮项目时，它会发生变化但不会重新渲染项目!

希望大家帮忙谢谢!

import {ADD_ITEM,REMOVE_ITEM} from "./Actions-Type"
var initialState ={
    baskeitems:[" Strawberry"," Blueberry","Blueberry","Blueberry","Strawberry"]
};

function Rootreducer (state=initialState,action){
    if (action.type === ADD_ITEM) {
            return Object.assign({}, state, {
                baskeitems: state.baskeitems.concat(action.payload)
            })
}
else{
    if(action.type===REMOVE_ITEM){
        return Object.assign({}, state, {
            baskeitems: state.baskeitems.filter((item)=>{return(item!==action.payload)})
        })
    }
    else{
        return state;
    }
}

}
export default Rootreducer;

Answer 1

只要使用 spread 重构数组，使用 splice 就可以了。运算符(operator)。您的 reducer 可以使用此语法表达如下。

import {ADD_ITEM,REMOVE_ITEM} from "./Actions-Type"
var initialState ={
    baskeitems:[" Strawberry"," Blueberry","Blueberry","Blueberry","Strawberry"]
};

function Rootreducer (state=initialState,action){
    if (action.type === ADD_ITEM)
            return { ...state, baskeitems: [ ...state.baskeitems, action.payload ] }

    if(action.type===REMOVE_ITEM) {
            state.baskeitems.splice(action.payload, 1)
            return { ...state, baskeitems: [ ...state.baskeitems ] }
    }

    return state;
}

}
export default Rootreducer;

使用此方法，有效负载必须是要拼接的索引。请注意，使用 else 语句没有任何意义，因为 return 语句将在操作类型匹配时结束执行。