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

依靠他们的index +接头可能会引入意外的错误。例如，如果呈现按顺序排序的项目，则它们与初始状态有所不同。

我建议您首先为商品分配一个唯一的标识符，然后再使用过滤器功能，以便按ID删除商品。

最初，您可以使用它们的索引将id分配给所有项目（也可以使用UUID作为ID的选项）：

const basketitems = ["Strawberry", "Blueberry", "Blueberry", "Blueberry", "Strawberry"]


const initialState = {
  basketitems: basketitems.map((item, index) => ({ id: index, name: item }))
}

Answer 2

只要使用spread运算符重构数组，就可以使用拼接。使用这种语法，您的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语句将在操作类型匹配时结束执行。

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

2 个答案: