删除项目时如何使项目列表自动更新呈现列表？答案

【问题标题】：How to make item list auto update rendered list when item is deleted?删除项目时如何使项目列表自动更新呈现列表？
【发布时间】：2018-01-14 06:09:11
【问题描述】：

我正在使用 Redux 构建网络购物车。我的购物车可以正常工作，但当我删除购物车上的商品时，页面需要刷新或更改才能呈现更改。如何在删除项目时显示更改？这是我的cart 组件：

import React, { Component } from 'react';
import {addCart} from './Shop';
import { removeCart } from '../../actions'; 
import { connect } from 'react-redux';

export class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {items: this.props.cart,cart: [],total: 0};
    }

    handleClick(item) {
        this.props.onCartRemove(item);
    } 

    ...
    render() {
        return(
            <div className= "Webcart" id="Webcart">
                <div id='WebcartWrapper'>
                    <ul id='webCartList'>
                        {this.state.items.map((item, index) => {
                            return <li className='cartItems' key={'cartItems_'+index}>
                                <h4>{item.item}</h4>
                                <p>Size: {item.size}</p>
                                <p>Price: {item.price}</p>
                                <button onClick={() => this.handleClick(item)}>Remove</button>
                            </li>
                        })}
                    </ul>
                    <div>Total: ${this.countTotal()}</div>
                </div>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
        onCartRemove: (item) => {
            dispatch(removeCart(item));
        },
    }
}

function mapStateToProps(state) {
  return { cart: state.cart };
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

这些是我的actions：

export const ADD_CART = 'ADD_CART';
export const REMOVE_CART = 'REMOVE_CART';

export function addCart(item){
    return {
        type: ADD_CART,
        payload: item
    }
};

export function removeCart(item){
    return{
        type:REMOVE_CART,
        payload: item
    }
};

这些是我的reducers：

import {ADD_CART} from './actions';
import {REMOVE_CART} from './actions';
import { REHYDRATE } from 'redux-persist/constants';

export default Reducer;

var initialState = {
  cart:{},
  data: [],
  url: "/api/comments",
  pollInterval: 2000
};

function Reducer(state = initialState, action){
    switch(action.type){
        case REHYDRATE:
                if (action.payload && action.payload.cart) {
                    return { ...state, ...action.payload.cart };
                }
            return state;

            case ADD_CART:
                return {
                    ...state,
                    cart: [...state.cart, action.payload]
                }

            case REMOVE_CART:
                return {
                    ...state,
                    cart: state.cart.filter((item) => action.payload !== item)
                }



            default:
                return state; 
    };
}

如果需要我的更多代码，请询问。如何让网页购物车列表在商品被移除时自动更新？

【问题讨论】：

标签： javascript html reactjs redux

【解决方案1】：

您需要更新您的状态以使其再次呈现..

在cart component中，添加函数

...
componentWillReceiveProps(nextprops)
{
 this.setState({
  items: nextprops.cart
 })
}
...

*) componentWillReceiveProps 将在handleClick 中exec dispatch() 之后调用，将reducers 中的新闻数据返回到cart 组件的this.props 中。

例如在您的代码中：

export class Cart extends Component {
    constructor(props) {
        ...
    }

    componentWillReceiveProps(nextprops)
    {
     this.setState({
      items: nextprops.cart
     })
    }

    handleClick(item) {
        ...
    } 

    render() {
    ...
    }
}

【讨论】：

如何在我的代码中使用它？你有它的方式我得到Uncaught ReferenceError: componentWillReceiveProps is not defined。

【解决方案2】：

在发送removeCart 操作后，您可以像这样触发网址更改。如果您已正确配置路由器，它应该可以工作。

onCartRemove: (item) => {
    dispatch(removeCart(item));
    this.props.history.push('/');
},

【讨论】：