Изменение состояния в React native App.js из другого компонента - PullRequest
Новая
       13

Изменение состояния в React native App.js из другого компонента

0 голосов
/ 05 марта 2019

Я делаю аутентификацию в приложении, и я застрял.У меня 2 разные навигации.Один показывает, если пользователь вошел в систему, а другой, если нет.В основном экран входа.Это работает нормально, если я изменяю значение вручную при запуске.Но я не могу найти способ изменить состояние, когда пользователь входит, например.Несмотря на то, что значение в модуле auth изменяется, оно не обновляется в App.js. Так как я могу обновить состояние App.js, например, на экране входа в систему? 

import React, { Component } from 'react';
import { AppRegistry, Platform, StyleSheet, Text, View } from 'react-native';
import DrawerNavigator from './components/DrawerNavigator'
import SignedOutNavigator from './components/SignedOutNavigator'
import auth from './auth'

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: auth.isLoggedIn
    }
  }

  render() {
    return (
      (this.state.isLoggedIn) ? <DrawerNavigator /> : <SignedOutNavigator />
    );
  }
}

AppRegistry.registerComponent('App', () => App)

и мой модуль auth,это очень простой импорт {AsyncStorage} из'act-native ';// пытаемся прочитать из локального файла let api_key let isLoggedIn = false 

function save_user_settings(settings) {
    AsyncStorage.mergeItem('user', JSON.stringify(settings), () => {
        AsyncStorage.getItem('user', (err, result) => {
            isLoggedIn = result.isLoggedIn
            api_key = result.api_key
        });
        isLoggedIn = true
    });
}
module.exports.save_user_settings = save_user_settings
module.exports.api_key = api_key
module.exports.isLoggedIn = isLoggedIn

1 Ответ

0 голосов
/ 05 марта 2019

Во-первых, существует множество способов решения этой проблемы.В связи с этим я попытаюсь объяснить вам, почему то, что у вас сейчас есть, не работает.

Причина, по которой это происходит, заключается в том, что когда вы присваиваете auth.isLoggedIn своему состоянию isLoggedIn, выприсваивая значение один раз, как копию.Это не ссылка, которая сохраняется.

В дополнение к этому, помните, что состояние React обычно обновляется только с setState(), и оно никогда не вызывается здесь, поэтому ваше состояние не будет обновляться.

Способ, которым я бы подошел к этой проблеме, не добавляя такие элементы, как Redux, что само по себе излишне для этой проблемы, состоит в том, чтобы изучить создание компонента более высокого порядка аутентификации, который обрабатывает всю логику аутентификации и оборачивает все ваше приложение.Оттуда вы можете контролировать, следует ли отображать дочерние объекты или выполнять перенаправление.

Auth Component 

componentDidMount() {
 this._saveUserSettings(settings);
}

_saveUserSettings(settings) {
    AsyncStorage.mergeItem('user', JSON.stringify(settings), () => {
        AsyncStorage.getItem('user', (err, result) => {
            isLoggedIn = result.isLoggedIn
            api_key = result.api_key
        });
        this.setState({isLoggedIn: true});
    });
}

render() {
 const { isLoggedIn } = this.state;
 return isLoggedIn ? this.props.children : null;
}

App.js 

render() {
   <AuthComponent>
      //the rest of authenticated app goes here
   </AuthComponent>
}

Вот очень быстрый, неполный пример.Но это должно показать вам, как вы можете выложить свою аутентификацию.Вы также захотите рассмотреть обработку ошибок и тому подобное.

...