React Redux - undefined не является объектом, оценивающим this.props.navigation.navigate - PullRequest
Новая
       54

React Redux - undefined не является объектом, оценивающим this.props.navigation.navigate

0 голосов
/ 09 марта 2019

Я новичок в Redux и не понимаю, что не так со следующей настройкой.Я получил ошибку: TypeError: TypeError: undefined не является объектом (оценка '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>

Моя версия реагирующей навигации: 3.2.1

Обновление: попытался выполнить решение из React Native: TypeError: undefined не является объектом (оценивает this.props.navigation.перейти ') но безуспешно

1 Ответ

0 голосов
/ 09 марта 2019

Это из-за другого файла, где вы используете компонент экрана входа напрямую. 

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

Этого не произойдет, если вы ожидаете, что this.props.navigation будет иметь значение.Решением здесь было бы удалить это другое использование Provider.

Следующего, что у вас уже достаточно для подключения к Redux. 

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