React Redux - undefined 不是评估 this.props.navigation.navigate 的对象

Question

我是 Redux 的新手，我不明白以下设置有什么问题。我收到错误：TypeError: TypeError: undefined is not an object (evalating 'this.props.navigation.navigate')

对于操作，我有一个登录功能：

export const loginWithEmail = ({email, password}) => async (dispatch) => {
    dispatch({type: "LOADING"})
    try {
        let user = await auth.signInWithEmailAndPassword(email, password);
        dispatch({type: "LOGIN_SUCCESS", payload: user})
    } catch (error) {
        dispatch({type: "LOGIN_FAILURE"})
    }
}

登录组件：

class Login extends Component {
  componentWillReceiveProps(nextProps) {
    if(!_.isEmpty(nextProps.user)) {
      this.props.navigation.navigate('Home');
    }
  }

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

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

const mapStateToProps = state => {
  return {
    email: state.auth.email,
    password: state.auth.password,
    error: state.auth.error,
    user: state.auth.user
  }
}

export default connect(mapStateToProps, {loginWithEmail})(Login);

在我的 App.js 中

const AuthStack = createStackNavigator({
  Login: { screen: Login }
});

const MainStack = createStackNavigator(
  {
    Home: { screen: 'Home' },
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    );
  }
}

我也尝试在另一个组件中使用登录组件，如下所示：

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
...
    <Provider store={store}>
        <Login navigation={this.props.navigation}/>
    </Provider>

我的 react-navigation 版本是 3.2.1

更新：尝试遵循React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') 的解决方案，但没有成功

Answer 1

这是因为您直接使用登录屏幕组件的其他文件。

<Provider store={store}>
    <Login/>
</Provider>

如果您期望this.props.navigation 有值，则不会。这里的解决方案是删除Provider 的其他用途。

您已经拥有的以下内容足以连接到 Redux。

<Provider store={store}>
    <AppContainer/>
</Provider>