Redux Store元素异常：切换页面时props出现undefined问题求助

看起来你遇到的问题很典型，我帮你梳理几个最可能的原因和对应的解决方案：

1. 检查Redux State的结构（最常见原因） #

你提到初始状态是{ listItems: [...], currentItem: null, currentDisplay: "board" }，但如果你的项目使用了combineReducers来组合多个reducer，那么这个初始状态会被包裹在一个对应的key下面。比如假设你的rootReducer是这样写的：

import { combineReducers } from 'redux';
import yourReducer from './yourReducer';

const rootReducer = combineReducers({
  // 这里的key（比如`thumbnail`）会成为state下的一级属性
  thumbnail: yourReducer
});

那此时你的state结构会变成{ thumbnail: { listItems: [...], currentItem: null, currentDisplay: "board" } }，而你的mapStateToProps直接取state.listItems自然会得到undefined。

解决方案：
修改mapStateToProps，指向正确的嵌套路径：

function mapStateToProps(state) {
  // 替换成你实际的reducer key
  return {
    listItems: state.thumbnail.listItems,
    currentItem: state.thumbnail.currentItem,
    currentDisplay: state.thumbnail.currentDisplay,
  }
}

你可以先在mapStateToProps里加一句console.log('Full state:', state)，打印整个state对象，就能清楚看到结构是否符合预期。

2. 检查Reducer的状态更新逻辑 #

如果你的Reducer在处理某些action时，没有正确保留原有状态的字段，也会导致state丢失数据。比如错误的写法：

case 'SWITCH_TO_SHOP':
  // 只返回了currentDisplay，丢失了listItems和currentItem
  return { currentDisplay: "shop" };

解决方案：
使用展开运算符...state保留原有状态的所有字段，再覆盖需要更新的部分：

case 'SWITCH_TO_SHOP':
  return {
    ...state,
    currentDisplay: "shop"
  };

确保所有Reducer的case都遵循这个规则，避免状态字段丢失。

3. 检查Item组件的连接逻辑 #

错误同样可能出现在Item组件的mapStateToProps里，它可能也存在和Thumbnails组件一样的路径错误。按照上面的方法检查Item组件的mapStateToProps，确保它也正确指向state里的对应字段。

先从打印state结构开始排查，这一步能帮你快速定位问题所在。

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