使用mergeProps访问状态时组件必填props未定义的问题排查

你这是踩了mergeProps的一个常见小坑——你的mergeProps函数只返回了自定义的onLeave方法，却把组件依赖的其他必填props全丢掉了！

问题根源 #

mergeProps的核心作用是把propsFromState（mapStateToProps返回的状态props）、**propsFromDispatch（mapDispatchToProps返回的方法props）和ownProps（组件自身接收的外部props）**三者合并后，传递给被包裹的子组件。如果只返回onLeave，那原本子组件需要的那些必填props自然就变成未定义了。

修复后的代码 #

你需要先把所有原有props合并进去，再覆盖自定义的onLeave方法，这样既能访问state里的topics，又不会丢失其他必要props：

const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
  return {
    // 先合并所有原有props（顺序可根据需求调整）
    ...propsFromState,
    ...propsFromDispatch,
    ...ownProps,
    // 自定义onLeave方法，这里能直接拿到propsFromState里的topics
    onLeave() {
      const topics = propsFromState.topics;
      // 在这里编写你的业务逻辑
      
      // 如果需要调用父组件原本传入的onLeave方法，记得加上这行（可选）
      // ownProps.onLeave?.();
    }
  };
};

额外提醒 #

别忘了mergeProps的第三个参数是ownProps，也就是组件自身从外部接收的props，如果子组件需要这些内容，一定要把它也合并到返回对象里。这样处理后，子组件需要的所有必填props就都能正常获取到了。

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