在反应中将变量从一个文件导出到另一个文件

Question

I am currently working on a react-native based website and I am struggling to pass values from one file to another. The value I am trying to import is 'Key':

class Encrypt extends Component {
encryptData = async() => {
    fetch('http://localhost:7000/Data')
    .then(res => res.json())
    .then((data) => {
      var pub1Key = data ;
      var Key=pub1Key["encryptedData"];
}

And use it like this

class Decrypt extends Component {
  deData(){
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({data: Key })
  };

I tried to use export option but it didn't work. These are two separate files. Encrypt.js and Decrypt.js.

Answer 1

You can manage this via any state manager. You can use Redux or Mobx or ReactContext for that.

However, if this is the token that is required for authentification or data that you want to access even after the page will be reloaded, you can simply store it in AsyncStorage.

So your code would look something like that.

import {AsyncStorage} from 'react-native';

class Encrypt extends Component {
encryptData = async() => {
    fetch('http://localhost:7000/Data')
    .then(res => res.json())
    .then((data) => {
      //you can decrypt 'data' here
      return AsyncStorage.setItem('pub1Key', data);
    })
    .catch((err)=>{
      //handle any errors here
    })
}


class Decrypt extends Component {
  async getData(){
    return new Promise((resolve, reject)=> {
      try{
        const data = await AsyncStorage.setItem('pub1Key', data);
        //you can encrypt data here
        resolve(data);
      } catch(e){
        reject(e);
      }
    })
  };

The docs for that. https://reactnative.dev/docs/asyncstorage.html