javascript - 分派动作后不显示道具

Question

我创建了两个根据价格对产品进行排序的操作，我将排序数组分配给 redux 状态产品数组，但是当我触发操作时，产品从组件中消失了。

我读过componentWillReceiveProps但componentWillUpdate不知道如何使用它..

以下是操作：

// actions
    export const sortProductsByLowestPrice = () => (dispatch, getState) => {
          let products = getState().products.products.products;
          const isArray = Array.isArray(products);
          const sorted = products.slice().sort((a,b) => { return a.price > b.price})
          dispatch({
            type: SORT_PRODUCTS_BY_LOWEST_PRICE,
            payload: sorted
          })
          
    }


    export const sortProductsByHighestPrice = () => (dispatch, getState) => {
          let products = getState().products.products.products;
          const isArray = Array.isArray(products);
          const sorted = products.slice().sort((a,b) => { return a.price < b.price})
          dispatch({
            type: SORT_PRODUCTS_BY_HIGHEST_PRICE,
            payload: sorted
          })
    }

// rendering products 
  

  {this.props.products ? this.props.products.slice(0,5).map((product) => {
           return <ProductItem key={product._id} product={...product} />
              }) : null
    
    // click events
    <Button onClick={this.props.sortProductsByLowestPrice}>Lowest price</Button>
    <Button onClick={this.props.sortProductsByHighestPrice}>Highest price</Button>

操作有效，它们按应有的方式排序，在记录器中查看结果。

import React, {Component} from 'react';
import { PropTypes } from 'prop-types';

import { connect } from 'react-redux';
import { getProducts, sortProductsByLowestPrice, sortProductsByHighestPrice } from '../actions/productsActions';

import { Grid, Row, Button, Group, Loader } from 'semantic-ui-react';

import ProductItem from './ProductItem';

class ProductList extends React.Component {
  constructor(props) {
    super(props);
    
  }

  componentDidMount() {
    this.props.getProducts();
  }




  render() {
    
    return <div>
            <Button.Group className="buttonGroup">
                  <Button onClick={this.props.sortProductsByLowestPrice}>Lowest price</Button>
                  <Button onClick={this.props.sortProductsByHighestPrice}>Highest price</Button>
            </Button.Group>
            <div className="horizontal">
              {this.props.products ?
                 this.props.products.slice(0,5).map((product) => {
                return <ProductItem key={product._id} product={...product} />
                 }) : <Loader active inline />}
            </div>
           </div>
  }
}

ProductList.propTypes = {
  getProducts: PropTypes.func,
  products: PropTypes.array,
  sortProductsByLowestPrice: PropTypes.func,
  sortProductsByHighestPrice: PropTypes.func
}

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

const mapDispatchToProps = (dispatch) => ({
    getProducts: () => dispatch(getProducts()),
    sortProductsByLowestPrice: () => dispatch(sortProductsByLowestPrice()),
    sortProductsByHighestPrice: () => dispatch(sortProductsByHighestPrice())
});



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

标签： javascriptreactjsreduxreact-redux