React Redux报错：undefined is not an object evaluating this.props.navigation.navigate

我来帮你一步步排查并解决这个问题，先梳理几个核心的错误点：

1. 导航结构配置错误（最关键） #

你的App.js导航配置存在两个明显问题：

• MainStack里的Home screen写的是字符串'Home'，这不是有效的组件引用，必须传入实际的Home组件；
• 你把AuthStack作为MainStack的一个嵌套screen，这会导致登录流程被嵌套在主流程里，无法正确管理未登录/已登录的页面切换。在react-navigation 3.x中，应该用createSwitchNavigator来区分未登录的Auth流程和已登录的Main流程，这样能保证导航状态的正确切换。

修改后的App.js示例：

import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import Login from './path/to/Login'; // 替换成你的Login组件实际路径
import Home from './path/to/Home'; // 导入你的Home组件

// 未登录专属栈
const AuthStack = createStackNavigator({
  Login: { screen: Login }
});

// 已登录专属栈
const MainStack = createStackNavigator({
  Home: { screen: Home }
});

// 用SwitchNavigator切换登录/主流程（无历史记录，适合Auth场景）
const AppNavigator = createSwitchNavigator(
  {
    Auth: AuthStack,
    Main: MainStack
  },
  {
    initialRouteName: 'Auth' // 默认进入登录页
  }
);

const AppContainer = createAppContainer(AppNavigator);

// 注意：不要在render里创建store！每次render都会重新生成，导致状态丢失
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    );
  }
}

2. 错误的Login组件使用方式 #

你尝试在其他组件里手动渲染<Login navigation={this.props.navigation}/>还嵌套了Provider，这会引发两个严重问题：

• 多个Provider会创建独立的Redux Store，导致应用状态无法共享；
• Login组件没有被挂载到导航栈中，即使手动传递navigation，也无法使用导航的完整栈管理功能。

正确的做法是：Login组件只需要放在AuthStack里，由导航系统自动注入navigation props，不需要手动渲染和传递。

3. 废弃的生命周期方法替换 #

你的Login组件里用了componentWillReceiveProps，这个方法在React 16.3+已被废弃，建议换成componentDidUpdate来监听用户状态变化：

class Login extends Component {
  componentDidUpdate(prevProps) {
    // 仅当user从空变为有值时触发跳转
    if (_.isEmpty(prevProps.user) && !_.isEmpty(this.props.user)) {
      this.props.navigation.navigate('Main'); // 跳转到已登录的Main栈，而非直接跳Home
    }
  }

  login() {
    const {email, password} = this.props;
    this.props.loginWithEmail({email, password});
  }

  render() {
    return ( ... )
  }
}

最后验证步骤 #

1. 确认所有组件路径正确导入；
2. 确保整个应用只有一个Provider包裹AppContainer；
3. 测试登录流程，登录成功后应该自动切换到Home页面，且不会再出现navigation undefined的错误。

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