undefined is not a function (evaluating 'navigation.dispatch')

[UKbed990]

سلام. کدی که نوشتم قراره بعد از اینکه کاربر روی logout رو انتخاب کرد، وارد صفحه اول اپلیکیشن بشه. ولی با ارور زیر مواجه میشم:
undefined is not a function (evaluating ‘navigation.dispatch’)
کد اکشن کریتور:

JavaScript

import {NavigationActions} from 'react-navigation'; import {AsyncStorage} from 'react-native'; import {applyMiddleware as dispatch} from "redux"; export const userRemove = (navigation) => { AsyncStorage.removeItem('user'); const navigateAction = NavigationActions.navigate({ routeName: 'First', props: {} }); navigation.dispatch(navigateAction); };

1 2 3 4 5 6 7 8 9 10 11 12 13

import {NavigationActions} from 'react-navigation'; import {AsyncStorage} from 'react-native'; import {applyMiddleware as dispatch} from "redux";   export const userRemove = (navigation) => {     AsyncStorage.removeItem('user');     const navigateAction = NavigationActions.navigate({         routeName: 'First',         props: {}     });     navigation.dispatch(navigateAction); };

من این اکشن رو از کامپوننت ساید بار صدا میزنم که کدش اینجاست:

JavaScript

import React, {Component} from &#039;react&#039;; import { Container, Content, Footer, FooterTab, Button, Icon } from &#039;native-base&#039;; import {userRemove} from &#039;../actions/sideBarAction&#039;; import {connect} from &quot;react-redux&quot;; import {bindActionCreators} from &quot;redux&quot;; class SideBar extends Component { constructor(props) { super(props); } logout() { userRemove(this.props.navigation); } render() { return ( <Container> <Content> ... </Content> <Footer> <FooterTab> <Button onPress={this.logout.bind(this)}> <Icon name=&quot;logout&quot;/> </Button> </FooterTab> </Footer> </Container> ) } } const mapStateToProps = state => { return { username: state.home.username, password: state.home.password, score: state.home.score, } }; const mapDispatchToProps = dispatch => { return Object.assign({dispatch: dispatch}, bindActionCreators(userRemove, dispatch)); }; connect(mapStateToProps, mapDispatchToProps)(SideBar);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

import React, {Component} from &#039;react&#039;; import {     Container,     Content,     Footer,     FooterTab,     Button,     Icon } from &#039;native-base&#039;; import {userRemove} from &#039;../actions/sideBarAction&#039;; import {connect} from &quot;react-redux&quot;; import {bindActionCreators} from &quot;redux&quot;;   class SideBar extends Component {     constructor(props) {         super(props);     }       logout() {         userRemove(this.props.navigation);     }       render() {         return (             <Container>                 <Content>                     ...                 </Content>                 <Footer>                     <FooterTab>                         <Button onPress={this.logout.bind(this)}>                             <Icon name=&quot;logout&quot;/>                         </Button>                     </FooterTab>                 </Footer>             </Container>         )     } }   const mapStateToProps = state => {     return {         username: state.home.username,         password: state.home.password,         score: state.home.score,     } }; const mapDispatchToProps = dispatch => {     return Object.assign({dispatch: dispatch},     bindActionCreators(userRemove, dispatch)); };   connect(mapStateToProps, mapDispatchToProps)(SideBar);

از اونجایی که asyncStorage به درستی پاک میشه، پس کامپوننت درست کار میکنه اما وقتی navigation رو توی کامپوننت و اکشن کریتور لاگ میگیرم، بصورت undefined نشون میده. لطفا راهنمایی کنین. خیلی کارم گره خورده. سعی کردم طبق مثال های سایت پیش برم.
درضمن لینک سوالم تو stackoverflow هم قرار میدم:
لینک stackoverflow
پیشاپیش ممنون از پاسختون

[مهدی]

سلام.کتابخونه react navigation به روز شده و شاید بغضی methode ها تغییر کرده باشند و یا کلا حذف و جایگزینی براشون معرفی شده.داکیومنت جدید کتابخونه رو مطالعه کنید

[UKbed990]

سلام. مشکل با withNavigation حل شد.
جزئیات راه حل توی لینک stackoverflow که تو متن سوال گذاشتم، قابل مشاهده ست.
پیروز باشید

[مهدی]

جزئیات راه حل رو اینجا هم بزارید

[UKbed990]

You can also wrap your component with withNavigation function from react-navigation. That will make sure you have valid navigation prop.

JavaScript

import { withNavigation } from react-navigation; ... connect(mapStateToProps, mapDispatchToProps)(withNavigation(SideBar));

1 2 3 4 5

import { withNavigation } from react-navigation;   ...   connect(mapStateToProps, mapDispatchToProps)(withNavigation(SideBar));

Alternatively, you may pass this.props.navigation from parent component too.

[نویسنده]

نوشته‌ها