React类组件转Hooks时删除mapStateToProps出现undefined如何解决？

开发者阿泽

2026-9-30

解决方案

你遇到的undefined问题本质是mapStateToProps的作用就是把Redux Store里的字段映射到组件的props上，你把它删掉之后，原映射的sites/brokers/cameras等字段就不会再注入到组件props里，自然props[props.action]就拿不到值了。

可以直接用Redux官方提供的Hooks useSelector替代connect + mapStateToProps的写法，完全移除connect相关代码即可。

改造后的完整B.js代码

import React from "react";
import { useSelector } from "react-redux";

function B(props) {
  // 映射逻辑和原来的mapStateToProps保持完全一致
  const stateMapper = {
    sites: (state) => state.articles.sites,
    analysers: (state) => state.siteArticles.analysers,
    brokers: (state) => state.siteArticles.brokers,
    cameras: (state) => state.siteArticles.cameras,
    platforms: (state) => state.siteArticles.platforms,
  };

  // 动态根据传入的action参数获取对应的store数据
  const targetData = useSelector(stateMapper[props.action]);
  console.log("data", targetData);

  return <div></div>;
}

export default B;

注意事项

确保项目的react-redux依赖版本≥7.1.0，该版本才正式支持Hooks API，版本过低可执行npm i react-redux@latest升级。
可添加参数校验避免异常：如果传入的action值不在预设范围内，可添加兜底逻辑避免报错，示例：

const getState = stateMapper[props.action];
if (!getState) {
  console.warn(`非法action参数：${props.action}`);
  return null;
}
const targetData = useSelector(getState);