React调用fetchDescription后无法从mapStateToProps获取descriptionList

问题表现 #

• 在空依赖useEffect中已主动调用fetchDescription动作
• 控制台可确认全局状态内的descriptionList数据已成功加载，mapStateToProps执行时也能打印到该字段的有效取值
• 组件内部从props解构得到的descriptionList始终为undefined，挂载阶段钩子打印值为空，页面无法正常渲染对应内容

根因定位 #

1. mapStateToProps返回结构不符合connect规范
   react-redux 的connect机制要求mapStateToProps必须返回一个纯对象，框架会将该对象的所有一级属性合并到组件props中。原实现从全局state解构出descriptionList后直接作为函数返回值，未封装为对象结构，导致connect在合并props时，无法识别需要注入的descriptionList字段——即便后续全局状态触发更新，组件props中也始终不存在这个键，解构时自然返回undefined。
2. 挂载阶段的日志取值为undefined属于正常时序
   空依赖的useEffect在组件首次挂载时执行，此时fetchDescription的异步请求尚未完成、全局状态也未更新，这个时间点打印的descriptionList为初始值undefined是符合React运行逻辑的，并非核心异常。真正的问题是异步请求完成、全局状态更新后，组件props仍未注入对应字段。

修复方案 #

调整mapStateToProps的返回结构，将需要注入组件的字段封装为键值对对象返回，示例代码：

const mapStateToProps = (state) => {
  // 从全局状态树读取目标字段
  const { descriptionList } = state;
  console.log("mapStateToProps 映射阶段取值：", descriptionList);
  // 必须返回纯对象，对象键名即为组件props中可访问的字段名
  return {
    descriptionList
  };
};

修复后，当fetchDescription动作完成、全局状态更新时，connect会自动触发组件重渲染，新的props会携带最新的descriptionList值，页面可正常完成渲染。

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