触发Redux Action后组件Props不显示，商品消失问题求助

看起来你已经把Action的逻辑搭起来了，而且日志显示排序结果没问题，但组件里的商品消失，大概率是Reducer状态更新逻辑有误或者组件的props判断不够严谨，咱们一步步来排查和修复：

1. 先检查你的Reducer实现（最可能的原因） #

你没贴出Reducer代码，但从Action和mapStateToProps的路径state.products.products.products来看，你的状态结构是嵌套的三层：{ products: { products: { products: [...] } } }。如果Reducer在处理排序Action时没有正确更新这个嵌套路径，就会导致this.props.products变成undefined或者空值，组件自然不渲染商品。

确保你的Reducer里正确处理了排序的Action类型，比如：

import { SORT_PRODUCTS_BY_LOWEST_PRICE, SORT_PRODUCTS_BY_HIGHEST_PRICE, GET_PRODUCTS } from './actionTypes';

const initialState = {
  products: {
    products: [] // 初始商品数组
  }
};

export default function productReducer(state = initialState, action) {
  switch(action.type) {
    case GET_PRODUCTS:
      return {
        ...state,
        products: {
          ...state.products,
          products: action.payload
        }
      };
    case SORT_PRODUCTS_BY_LOWEST_PRICE:
      return {
        ...state,
        products: {
          ...state.products,
          products: action.payload // 这里必须正确赋值到嵌套的products数组
        }
      };
    case SORT_PRODUCTS_BY_HIGHEST_PRICE:
      return {
        ...state,
        products: {
          ...state.products,
          products: action.payload
        }
      };
    default:
      return state;
  }
}

关键点是更新状态时要逐层展开对象，不能直接覆盖外层的products对象，否则会丢失其他状态字段，或者路径错误导致props取不到值。

2. 修正排序函数的比较逻辑（避免潜在问题） #

虽然你说日志显示排序正常，但当前的排序比较函数返回布尔值（a.price > b.price），这不是Array.sort()的标准用法——标准的比较函数应该返回数字（-1、0、1）。布尔值会被强制转为1或0，在某些边缘场景下可能导致排序异常，比如价格相同的商品，或者数字类型的价格和字符串类型混合的情况。

把排序逻辑改成更可靠的写法：

// 最低价排序（升序）
export const sortProductsByLowestPrice = () => (dispatch, getState) => {
  const products = getState().products.products.products;
  if (!Array.isArray(products)) return; // 加个边界判断
  const sorted = products.slice().sort((a, b) => a.price - b.price);
  dispatch({
    type: SORT_PRODUCTS_BY_LOWEST_PRICE,
    payload: sorted
  });
};

// 最高价排序（降序）
export const sortProductsByHighestPrice = () => (dispatch, getState) => {
  const products = getState().products.products.products;
  if (!Array.isArray(products)) return;
  const sorted = products.slice().sort((a, b) => b.price - a.price);
  dispatch({
    type: SORT_PRODUCTS_BY_HIGHEST_PRICE,
    payload: sorted
  });
};

3. 优化组件的props判断逻辑 #

你当前的判断{this.props.products ? ... : <Loader />}有个小问题：如果排序后的products是空数组，this.props.products会被判定为true（因为空数组是truthy值），然后map空数组不会渲染任何商品，看起来就像“消失”了。

改成更严谨的判断，区分“加载中”和“无商品”的情况：

{Array.isArray(this.props.products) ? (
  this.props.products.length > 0 ? (
    this.props.products.slice(0,5).map((product) => (
      <ProductItem key={product._id} product={product} />
    ))
  ) : (
    <p>No products found</p>
  )
) : (
  <Loader active inline />
)}

关于componentWillReceiveProps和componentWillUpdate #

其实在这个场景下你大概率不需要用这两个生命周期函数——Redux会自动更新组件的props，触发重新渲染。如果确实遇到props更新但组件不渲染的情况，可以用componentDidUpdate来调试，看看props是否正确更新：

componentDidUpdate(prevProps) {
  console.log('Previous products:', prevProps.products);
  console.log('Current products:', this.props.products);
}

通过日志就能判断是Redux状态没更新，还是组件没正确接收到props。

内容的提问来源于stack exchange，提问作者Merim