StackNavigator的子組件在其父代外調用時呈現兩次

Question

我使用React Navigation在我的React Native應用程序中的屏幕之間進行導航。我的屏幕結構是：

- DrawerNavigator  
    - HomeScreen  
    - MoviesStackNavigator  
     - MoviesListScreen  
     - MovieDetailsScreen  
    - DiscoverScreen 

現在我想導航並將DiscoverScreen中的一些參數傳遞給MoviesListScreen。

這裏是我的代碼：

DiscoverScreen.js

onSearchConfirm() { 
    this.setState({searching: true}) 


    var params = { 
     sort_by: this.state.sortBy, 
     year: this.state.releaseYear, 
     with_genres: this.state.genreIds.join(',') 
    }; 

    const _this = this; 

    return fetch(Configuration.TMDB_BASE_URL 
       .concat('/discover/movie?') 
       .concat(Utility.stringFromQueryParams({...params, api_key: Configuration.TMDB_API_KEY}))) 
     .then(response => response.json()) 
     .then(jsonResponse => { 
      _this.setState({searching: false}); 

      const navigateAction = NavigationActions.navigate({ 
       routeName: 'MoviesList', 
       params: {data: jsonResponse} 
      }) 

      _this.props.navigation.dispatch(navigateAction) 

     }) 
     .catch(err => console.error(err.toString())) 
} 

DrawerNavigator：

export default MenuNavScreen = DrawerNavigator(
{ 
    Home: { 
     screen: HomeScreen 
    }, 
    Movies: { 
     screen: MoviesStackNavigator 
    }, 
    DiscoverMovies: { 
     screen: DiscoverScreen 
    }, 
    About: { 
     screen: AboutScreen 
    }, 
}, 
{ 
    initialRouteName: 'Home' 
}) 

MoviesStackNavigator：

export default MoviesStackNavigator = StackNavigator({ 
    MoviesList: { 
     screen: MoviesListScreen 
    }, 
    MovieDetails: { 
     screen: MovieDetailsScreen 
    }, 
}); 

最後，該代碼在那裏我檢查F或PARAMS MoviesListScreen：

//... 
componentWillMount() { //THIS IS CALLED TWICE 

    if(!this.props.navigation.state.params) { 
     MoviesService.getPopularMovies() 
      .then(movies => { 
       this.setState({movies: movies.results}) 
      }) 
      .catch(err => Alert.alert(err.toString())) 
    } 
    else { 
     this.setState({movies: this.props.navigation.state.params.data.results}) 
    } 
} 
//... 

好了，代碼的最後一塊被執行兩次。首先「數據」參數未定義，第二次使用正確填充的參數。我的錯誤在哪裏？謝謝大家:)

編輯：要清楚，這是上述問題的結果：

IMAGE

Answer 1

一段時間後，我意識到，我可以通過更換DiscoverScreen解決問題一個新的DiscoverStackNavigator，然後將DiscoverScreen，MoviesListScreen和MovieDetailsS​​creen設置爲其子屏幕。所以，我的代碼是看現在這個樣子：

DrawerNavigator：

export default MenuNavScreen = DrawerNavigator(
{ 
    Home: { 
     screen: HomeScreen 
    }, 
    Movies: { 
     screen: MoviesStackNavigator 
    }, 
    DiscoverMovies: { 
     screen: DiscoverStackNavigator 
    }, 
    About: { 
     screen: AboutScreen 
    }, 
}, 
{ 
    initialRouteName: 'Home' 
}) 

DiscoverStackNavigator：

export default DiscoverStackNavigator = StackNavigator({ 
    DiscoverMovies: { 
     screen: DiscoverScreen 
    } 
    DiscoverMoviesList: { 
     screen: MoviesListScreen 
    }, 
    DiscoverMovieDetails: { 
     screen: MovieDetailsScreen 
    }, 
}); 

導航到MoviesScreen：

onSearchConfirm() { 
    //...code before 

    return fetch(Configuration.TMDB_BASE_URL 
       .concat('/discover/movie?') 
       .concat(Utility.stringFromQueryParams({...params, api_key: Configuration.TMDB_API_KEY}))) 
     .then(response => response.json()) 
     .then(jsonResponse => { 
      _this.setState({searching: false}); 

      const navigateAction = NavigationActions.navigate({ 
       routeName: 'DiscoverMoviesList', // we changed the route name 
       params: {data: jsonResponse} 
      }) 

      _this.props.navigation.dispatch(navigateAction) 

     }) 
     .catch(err => console.error(err.toString())) 
} 

我不知道這是不是正確的做法，但它很好。