Передача данных в JSON объекте из одного класса во второй

Question

Здравствуйте, StackOverflow. Я хочу передать данные из моего объекта JSON в свой класс ящика. Я не мог получить доступ к этому объекту в моем втором классе. Я новичок в react native, поэтому любые предложения будут более ценными. 1003 *

UserLoginFunction = () =>{
 const { UserContact }  = this.state ;
 const { UserPassword }  = this.state ;
 if(this.state.UserContact == ""){
   ToastAndroid.show('Pleas Enter Contact Number Correctly ',ToastAndroid.SHORT)
 }
 else if (this.state.UserPassword == ""){
   ToastAndroid.show('Please Enter Password Correctly',ToastAndroid.SHORT)
 }
 else{

fetch(urls.localhosturl + urls.login, { 
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
 
    user_contact: UserContact,
    user_password: UserPassword,
   
 
  })
 
})
      
      .then((response) => response.json())
      .then((responseJson) => {

        
        // If server response message same as Data Matched
         if(responseJson.status === '200')
          {
            //Save User Details to Local Storage
            AsyncStorage.setItem("responseJson", JSON.stringify(responseJson));            this.props.navigation.navigate("Home","DrawerComponent",{userData:responseJson.data,
            });
            console.log(responseJson.data)
        }
        else{
          ToastAndroid.show(responseJson,ToastAndroid.SHORT);
          //Alert.alert(string,responseJson);
          
        }

      }).catch((error) => {
        console.error(error);
      });
 
    }
  }

class DrawerComponent extends React.Component {  
  drawerOptions = [
    {title: 'About Us', route: 'AboutUs', icon: 'md-card'},
    {title: 'Journey Prayers', route: 'Prayers', icon: 'md-ribbon'},
    {title: 'Recharge', route: 'Recharge', icon: 'md-cash'},
    {title: 'Help Line', route: 'HelpLine', icon: 'md-call'},
    {title: 'Media', route: 'Media', icon: 'md-radio'},
    {title: 'Motorway Sites', route: 'MotorwaySites', icon: 'md-pin'},
    {title: 'Notifications', route: 'Notifications', icon: 'md-notifications'},
    
  ];

  render() {
    
    return (
      <SafeAreaView style = {{flex : 1}}>
        <ScrollView>
      <View style = {{height : 150 , backgroundColor : 'white' , alignItems : 'center' , justifyContent : 'center'}}>
            <Image source = {require('../images/profile.jpg') } style = {{height : 120 , width : 120 ,
          borderRadius : 60 , marginTop : 45}} />
          //here i want to display username from json object
          <Text>Haseeb</Text>
          
       </View>
      <View style = {{ marginTop : 30,height : 30 , backgroundColor : 'white' , alignItems : 'center' , justifyContent : 'center'}}>
          <Text style= {{fontWeight: 'bold',fontSize: 20,textAlign: 'center'}}>
          </Text>
      </View>
      <View style={{borderBottomColor: '#dedede',marginTop: 25, borderBottomWidth: 1}}/>


      <View style={{flex: 1, marginTop: 10}}>
        {this.drawerOptions.map(item => (


          <TouchableOpacity
            style={{padding: 16}}
            onPress={() => {
              this.props.navigation.toggleDrawer();
              this.props.navigation.navigate(item.route);
            }}
            key={item.title}>
            <Text >
            <Ionicons name = {item.icon} size={24} style={{color: '#282828'}} />
            <Text>  </Text>
              {item.title}</Text>
          </TouchableOpacity>
        ))}
      </View>
      </ScrollView>
      </SafeAreaView>
    );
  }
}

Answer 1

Что ж, вы на правильном пути. Вы уже сохранили элемент в локальном хранилище, поэтому во втором компоненте вам нужно загрузить его только при монтировании компонента. Для этого вы должны использовать getItem метод AsyncStorage и сохранить результат в своем состоянии:

class DrawerComponent extends React.Component {
  state = { myItem: { data: { user_name: "" } } }

  componentDidMount() {
    const stringifiedItem = AsyncStorage.getItem("responseJson");
    if (stringifiedItem) {
      // Turn the string back into an object
      const myItem = JSON.parse(stringifiedItem);
      // Put it into state
      this.setState({ myItem });
    }
  }
}

Answer 2

вот как получить данные асинхронного c хранилища в любом месте класса, если у вас есть сохраненный объект целиком.

state = { userData: {}}

  async componentDidMount() {
    const stringifiedItem = await AsyncStorage.getItem("responseJson");
    // Turn the string back into an object
    const userData = JSON.parse(stringifiedItem);
    // Put it into state
    this.setState({ userData:userData.data });
    //console.log(userData.data)
    
  }
  
  

Вот как получить данные из асинхронного c хранилища в текстовый компонент

<Text>{this.state.userData.user_name}</Text>