L'accès aux données transmises avec StackNavigation en dehors du rendu

Question

Je peux fetch un ListView et afficher la page de détails onPress de l'un des éléments de la liste. Je peux montrer les détails de l'article cliqué dans le DetailsPage mais seulement dans le render(). Comment accéder à n'importe quelle valeur en dehors du rendu? Je veux utiliser cette valeur pour fetch informations d'une autre API

Page principale:

import React, { Component } from 'react'; 
import { 
AppRegistry, StyleSheet, ListView, 
Text, TouchableHighlight, View 
} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 
import DetailsPage from './src/DetailsPage';  

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'MyApp!', 
    }; 

    constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     userDataSource: ds, 
    }; 
    } 

    componentDidMount(){ 
     this.fetchUsers(); 
    } 

    fetchUsers(){ 

     fetch('https://jsonplaceholder.typicode.com/users') 
      .then((response) => response.json()) 
      .then((response) => { 
       this.setState({ 
        userDataSource: this.state.userDataSource.cloneWithRows(response) 
       }); 
      }); 
    } 

    renderRow(user, sectionID, rowID, highlightRow){ 
      const { navigate } = this.props.navigation; 
     return(

     <TouchableHighlight onPress={() => navigate('DetailsPage', {users:user })}> 

     <View style={styles.row}> 
     <Text style={styles.rowText}> {user.name} </Text> 

     </View> 
     </TouchableHighlight> 
    ) 
    } 

    render(){ 
     return(
      <ListView 
      dataSource = {this.state.userDataSource} 
      renderRow = {this.renderRow.bind(this)} 
      /> 
    ) 
    } 
} 


const NavigationTest = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    DetailsPage: { screen:DetailsPage }, 
}); 



AppRegistry.registerComponent('NavigationTest',() => NavigationTest); 

Détails Page:

import React, { Component } from 'react'; 
import { StyleSheet, ListView, Text, TouchableHighlight, View } from 'react-native'; 

export default class DetailsPage extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `${navigation.state.params.users.name}`, 

    }); 

    // var userid = 2; --> This doesn't work as it returns Unexpected Token where var is mentioned. 

    constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     albumDataSource: ds, 
    }; 
    } 

    componentDidMount(){ 
     this.fetchAlbums(); 
    } 

    fetchAlbums(){ 

     var theUser = 2; //This is the value I want to receive from the clicked user. 

     // var newUser = this.props.navigation.state.users.id; -> this doesnt work. 


     fetch('https://jsonplaceholder.typicode.com/albums?userId='+newUser) 
      .then((response) => response.json()) 
      .then((response) => { 
       this.setState({ 
        albumDataSource: this.state.albumDataSource.cloneWithRows(response) 
       }); 
      }); 
    } 


    renderRow(album, sectionID, rowID, highlightRow){ 

     return(

     <TouchableHighlight> 
     <View style={styles.row}> 
     <Text style={styles.rowText}> {album.userId} - {album.title} </Text> 
     </View> 
     </TouchableHighlight> 
    ) 
    } 


    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View style={styles.container}> 
     <Text style={styles.textstyle}>Screen Chat with {params.users.name}</Text> 
     <Text style={styles.textstyle}>Username : {params.users.username}</Text> 
     <Text style={styles.textstyle}>Email : {params.users.email}</Text> 
     <Text style={styles.textstyle}>ID : {params.users.id}</Text> 

     <ListView 
      dataSource = {this.state.albumDataSource} 
      renderRow = {this.renderRow.bind(this)} 
      /> 
     </View> 
    ); 
    } 
} 

Je veux utiliser le users.id pour aller chercher plus données sur le DetailsPage et afficher ces données. Comment je fais ça. S'il vous plaît aider. Merci beaucoup.

Answer 1

Voici ce que j'ai trouvé, ce regard tort de moi,

var newUser = this.props.navigation.state.users.id; 

Utilisez ce peut être il peut vous aider

console.log(this.props.naviagtion.state.params) **Check if are getting those value then use below one ** 
var newUser = this.props.navigation.state.params.users.id;