Не удается удалить элемент из моего магазина и обновить мой компонент - PullRequest
Новая
       16

Не удается удалить элемент из моего магазина и обновить мой компонент

0 голосов
/ 22 марта 2019

Вот мой компонент, я просто перечислю некоторые элементы 

import React, {Component} from "react";

import {connect} from "react-redux";
import { delFruit} from "../../js/actions/index";

function mapDispatchToProps(dispatch)
{
    console.log(dispatch);
    return {
        delFruit: fruits => dispatch(delFruit(fruits))
    };
}

const mapStateToProps = state => {
    return {fruits: state.fruits};
};



class ConnectedList extends Component {
    constructor()
    {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(el)
    {
        this.props.delFruit(el)
    }

    render()
    {
        // const fruits = this.state.fruits

        return (
            <div>
                <div className="title">Liste des courses</div>
                <ul className="list-group list-group-flush">
                    {
                        this.props.fruits.map((el, key) => (
                            <li key={key}>
                                {el.name} <i>( {el.price} € )</i> <i className="delete"  onClick={this.handleClick.bind(this, key)}></i>
                            </li>
                        ))
                    }
                </ul>
            </div>
        );

    }
}


const List = connect(mapStateToProps, mapDispatchToProps)(ConnectedList);

export default List;

Когда я хочу удалить элемент, я использую этот скрипт 

import {ADD_FRUIT, DELETE_FRUIT, DOUBLE_FRUIT} from "../constants/action-types";
import fruits from "../../data/fruits";
const initialState = {
    fruits: fruits['elements'],
};

function rootReducer(state = initialState, action)
{
    if (action.type === ADD_FRUIT) {
        return Object.assign({}, {}, {
            fruits: state.fruits.concat(action.payload)
        });
    }
    if (action.type === DELETE_FRUIT) {
        delete state.fruits[action.payload];

        return Object.assign({}, {}, {
            fruits:state.fruits
        });

    }
    if (action.type === DOUBLE_FRUIT) {
    }
    return state;
}

export default rootReducer;

Когда я проверяю состояние моего компонента, элемент удаляется должным образом (в примере № 2)

enter image description here

Но мой компонент не удаляет его из списка

Единственный способ заставить его работать - это сделать 

return Object.assign({}, {}, {
            fruits:state.fruits.concat()
        });

вместо 

return Object.assign({}, {}, {
            fruits:state.fruits
        });
  • почему мой компонент не обновляется без concat ()
  • Как это правильно сделать
  • почему мой массив сохраняет нулевое значение после удаления

1 Ответ

1 голос
/ 22 марта 2019

Вы можете удалить это с помощью оператора распространения.Вот основной фрагмент, показывающий, как это сделать. 

const state = {
  fruits: [1,2,3]
}

const action = {
  index: 1
}

const newState = [
              ...state.fruits.slice(0, action.index),
              ...state.fruits.slice(action.index + 1)
            ];

console.log(newState);

Таким образом, вы можете изменить свой код на: 

if (action.type === DELETE_FRUIT) {
    return {
        ...state,
        fruits: [
              ...state.fruits.slice(0, action.payload),
              ...state.fruits.slice(action.payload + 1)
        ]
    }
}
...