Redux请求产品数据成功但HomeScreen组件无法显示产品列表如何解决

问题原因 #

1. 列表渲染条件错误
   你在HomeScreen的渲染逻辑中使用了products > 0作为渲染判断条件，products是数组类型，直接和数字做大小比较时会被隐式转换：空数组会被转为0，非空数组会被转为NaN，所以无论是否拿到数据，这个判断条件的结果都是false，列表永远不会渲染。
2. useEffect内打印为空属于正常现象
   dispatch(listProducts())触发的是异步请求，你在dispatch之后立刻打印状态，此时异步请求还未完成，Redux还未更新状态，你拿到的是当前闭包中的旧状态，不是更新后的结果。
3. 偶发500错误的原因
   后端/api/products接口没有做参数容错处理，当传入的keyword为空或者pageNumber为非法值时，后端逻辑直接抛出异常没有捕获，返回了500错误。

解决方法 #

1. 修正渲染判断条件
   将HomeScreen中的列表渲染判断条件修改为判断数组长度：

// 原代码
{products > 0 && products.map((product) => (...))}
// 修改为
{products?.length > 0 && products.map((product) => (...))}

可选链?.可以避免products为undefined时抛出报错，兼容性更好。
2. 正确验证状态更新
如果需要查看更新后的products状态，可以将打印逻辑放在组件顶层，或者单独添加监听products变化的effect：

useEffect(() => {
  console.log('products已更新：', products)
}, [products])

3. 修复后端500错误
   检查后端/api/products接口的逻辑，给keyword、pageNumber参数添加默认值和格式校验，捕获数据库操作等异常，统一返回结构化的错误信息，避免直接抛出服务端异常。

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