React-Router与Redux协同问题：嵌套组件无法访问Redux函数

嘿，我来帮你排查这个嵌套组件里没法访问Redux addUser 函数的问题！你说调用时提示“函数未定义”，还怀疑和react-router有关，咱们一步步拆解可能的原因和解决方案：

1. 先排查react-router的组件渲染方式 #

如果你的Login组件是通过Route组件渲染的，那大概率是这里的坑：react-router用component属性渲染组件时，会创建新的组件实例，导致你手动传递的props直接丢失。

错误写法：

<Route path="/login" component={Login} />

正确写法：
改用render属性，把需要的props和路由自带的props一起传递给Login：

<Route path="/login" render={(routeProps) => <Login {...routeProps} addUser={addUser} />} />

2. 优先用Redux的connect注入函数（更可靠） #

其实没必要通过父组件手动传递Redux的action creator，直接在Login组件里用connect把addUser注入props才是更规范的做法，还能避免嵌套层级带来的props传递问题：

import { connect } from 'react-redux';
import { addUser } from './UserActionCreators';

class Login extends Component {
  handleSubmit = () => {
    // 直接通过props调用，不用再从父组件传
    this.props.addUser({ /* 用户数据 */ });
  }

  // ...你的其他组件代码
}

// 把addUser映射到组件props上
const mapDispatchToProps = {
  addUser
};

// 注意导出的是connect包裹后的组件
export default connect(null, mapDispatchToProps)(Login);

3. 检查Login组件的导出是否正确 #

你提到Login类组件末尾有相关代码，一定要确认：导出的是经过connect处理后的组件，而不是原始的Login类。如果只是写了export default Login;，那即使父组件传了addUser，也会因为Redux的包装丢失掉。

4. 验证addUser的action creator写法 #

最后再确认下你的UserActionCreators.addUser是否符合Redux要求：

• 如果是同步action，要返回带type的对象：

  export const addUser = (userData) => {
    return {
      type: 'ADD_USER',
      payload: userData
    };
  };
  

• 如果是异步action（比如要调用API），要确保你用了redux-thunk这类中间件，并且返回一个函数：

  export const addUser = (userData) => {
    return (dispatch) => {
      fetch('/api/users', {
        method: 'POST',
        body: JSON.stringify(userData)
      })
      .then(res => res.json())
      .then(data => dispatch({ type: 'ADD_USER', payload: data }));
    };
  };
  

先按上面的步骤排查，应该能解决“函数未定义”的问题～

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