Как экспортировать и импортировать идентификатор пользователя в React-Native

#react-native #api

#react-native #API

Вопрос:

Мне нужно получить идентификатор пользователя из API, а затем прикрепить его к переменной maybe, чтобы я мог экспортировать его, а затем использовать как значение в другом объекте. Может кто-нибудь помочь мне с примером, как я могу это сделать? Я застрял только при отображении его на консоли.

Вот мой код:

 class LoginScreen extends Component {

  constructor(){
           super();
           this.state = {
            email: '',
            password: '',
            id: 0,
            result: false,
           }
       }

    _userLogin() {
      
         let email = this.state.email;
         let password = this.state.password;
         
         if (email amp;amp; password) { 
           fetch("https://URL/api/login", {
             method: "POST",
             headers: {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({
               email: email,
               password: password,
             })
            })
           .then((response) => {
            if(response.status !== 200) {
              throw new Error('The given data was invalid.')
            }
            return response.json();
            })
           .then((responseData) => {
             this.renderResults(responseData)
             console.log(responseData)
             this.props.navigation.navigate('IntroScreen');
           })
           .catch((err) => console.log(err.message))
         }
       }

    componentDidMount () {
      fetch("https://URL/api/login", {
             method: "GET",
            })
          .then((response) => response.json())
          .then((responseJson) => {
             this.setState({getId: responseJson});
             console.log(responseJson.data.id);
             const id = responseJson.data.id;
          })
          .catch((error) => {
              console.error(error);
          });
    }

       renderResults = (responseData) => {
           if(responseData){
                this.setState({
                    result: true
                })
           }
       }

       handleEmail = (text) => {
             this.setState({ email: text })
       }


       handlePassword = (text) => {
             this.setState({ password: text })
       }

       errorMessage = () => {
         Alert.alert(
           'Error',
           'The given data was invalid.',
           [
            {
              text: "OK",
              style: "cancel"
            },
           ],
          { cancelable: false }
         )
       }

  render() {
    return (...)
  

После того, как я прикреплю его к переменной, я хочу использовать его в другом объекте, например:

 class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
         currentDate: new Date(),
         markedDate: moment(new Date()).format("YYYY-MM-DD"),
         isLoading: true,
         id: 1, <------- HERE
         name: '',
         floor: 0
        };
    }
  

Комментарии:

1. Вы можете использовать redux или использовать одноэлементный класс, сохранить его там и использовать везде в своем приложении.

2. Как я могу это сделать с помощью class. Я уже пробовал, но этого не произошло

Ответ №1:

Вот краткий фрагмент кода для устранения вашей проблемы.

Создайте одноэлементный класс, gloablParams.js например, следующее

 class GlobalParams {
  constructor() {
    this.id = null;
  }
  userId = (id)=>{
    if(!id) return this.id;
    this.id = id;
  }
}
const instance = new GlobalParams()
export default  instance;
  

Теперь LoginScreen вы можете импортировать его следующим образом

 import gp from './gloablParams'; 
  

Теперь вызовите эту функцию после успешного входа в систему, я думаю componentDidMount , что это или _userLogin и укажите идентификатор для его сохранения.

 componentDidMount() {
 fetch("https://URL/api/login", {
  method: "GET",
 })
  .then((response) => response.json())
  .then((responseJson) => {
   this.setState({ id: responseJson.data.id });
   gp.userId(responseJson.data.id); //save it here
   console.log(responseJson.data.id);
  })
  .then(gp.userId(id))
  .catch((error) => {
   console.error(error);
  });
}
  

Теперь вы можете импортировать его таким же образом, как я писал выше, и получить доступ к идентификатору пользователя из той же функции, но без аргументов

 gp.userId() //without any arguments
  

Комментарии:

1. как насчет чего-то подобного snack.expo.io/PpcPE2p !r а затем — импортируйте userId из ‘./ des’ и используйте его как id:userId

2. Нет, это неправильный способ его реализации. Кода, который я опубликовал, должно быть достаточно, если вы правильно введете его на свои экраны.

3. Но у меня ничего не отображается, когда я делаю это так snack.expo.io/8dgOwi8Wq даже я вставил ‘id’ в ()

4. Ваш рабочий стол смонтирован до LoginScreen?

5. Нет, после LoginScreen