时间戳

首页 > 解决方案 > React Redux 删除数组对象

javascript - React Redux 删除数组对象

问题描述

不久前我开始使用 redux，我遇到了一个大问题，我试图从数组中删除一个对象，但每次我这样做时 map 函数都不起作用，有什么提示吗？

减速器：

const initialState = {
    lojaState: {
        nome: "Café", cardapio: [{
            setor: 'Salgados', produtos: [
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "3,00"},
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "2,50" }
            ]
        }]
    }
};

export const lojaReducer = (state = initialState, action) => {
    switch (action.type) {
        case CLICK_UPDATE_VALUE:
            return state;
        case CLICK_DELETE_VALUE:
            return [
                ...state.lojaState.cardapio[action.carIndex].produtos.slice(0, action.proIndex),
                ...state.lojaState.cardapio[action.carIndex].produtos.slice(action.proIndex + 1)
            ]
        default:
            return state;
    }
}

动作.js

export const removeProduto = (cardapioIndice, produtoIndice) => ({
type: CLICK_DELETE_VALUE,
proIndex: produtoIndice,
carIndex: cardapioIndice});

Cardapio.js

 loja.cardapio.map((cardapio, indCardapio) => (
 <Row>
    {   
        cardapio.produtos.map((produto, indProduto) => (
            <Col md={4} sm={6} xs={12}>
                <Thumbnail src={thumbnail}>
                    <h3>Nome: {produto.nome}</h3>
                    <p>Descricao: {produto.descricao}</p>
                    <p>Valor: R$ {produto.valor}</p>
                </Thumbnail>
                <Button bsStyle="danger" onClick={() => removeProduto(indCardapio,indProduto)}>Delete</Button>
            </Col> 
        ))
    }
</Row>
))

标签： javascriptreactjsredux

解决方案

在 Redux reducer 中，您需要返回完整的新状态。

在这里，您的状态如下所示：

const initialState = {
    lojaState: {
        nome: "Café", cardapio: [{
            setor: 'Salgados', produtos: [
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "3,00"},
                { nome: 'Coxinha', descricao: 'lalalalal', valor: "2,50" }
            ]
        }]
    }
};

但是你返回一个像这样的数组：

case CLICK_DELETE_VALUE:
    return [
        ...state.lojaState.cardapio[action.carIndex].produtos.slice(0, action.proIndex),
        ...state.lojaState.cardapio[action.carIndex].produtos.slice(action.proIndex + 1)
    ]

新状态现在是数组，看起来不像以前。因此，您的代码无法使用这种新状态。

推荐阅读