Асинхронное хранилище перед перенаправлением на другую страницу - PullRequest
Новая
       61

Асинхронное хранилище перед перенаправлением на другую страницу

0 голосов
/ 14 октября 2019

Я пытаюсь создать страницу входа в систему, где userId будет сохранен через asyncstorage и получит это значение на перенаправленной странице и поместит его в скрытый атрибут, который будет использоваться для другого нажатия кнопки.

Вотмоя TouchableOpacity на странице входа, где она имеет функцию onPress 

<TouchableOpacity 
    style={styles.userBtn}
    onPress={this._login}
 ><Text style={styles.btnText}>Log In</Text>
 </TouchableOpacity>

При нажатии / нажатии вот функция 

_login = async () => {
  await AsyncStorage.setItem('isLoggedIn', '1');
  fetch('http://XXX.XXX.XXX.X:XX/api/public/signin', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      })
})
  .then((response) => response.json())
    .then((responseJson) => {
        if (responseJson['success'] == true) {


            AsyncStorage.setItem('authId', responseJson['authId'])

            this.props.navigation.navigate('Details')
        }else{
            AsyncStorage.clear();
            alert('Username or Password is incorrect');
        }
    })
    .catch((error) => {
        console.error(error);
    });
}

А вот моя функция страницы сведений для получения authID

Это перед render () 

constructor(props){
super(props);
this.state={currentTime: null, currentDay: null, longitude: 0, latitude: 0, error: null }
this.daysArray = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
this._getUserId();
}

и после render () 

_getUserId = async() => {
  const userId = await AsyncStorage.getItem('authId');
  alert(userId);
}

Так что в основном перед компонентом render () в конструкторе я вызывал функцию, котораянаходится после части render (). Но это всегда возвращает мне нулевое предупреждение.

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

Ответы [ 2 ]

2 голосов
/ 14 октября 2019

Вы пытались поместить _getUserId в метод componentDidMount? Иногда лучше вызывать все функции внутри componentDidMount, которые необходимо выполнить после визуализации компонента. А также попробуйте isLogged, чтобы проверить, была ли проблема с вашим идентификатором авторизации, так как это может быть нулевым. Если isLoggedIn равен 1, то существует проблема с вашим идентификатором аутентификации,

Например. 

class ABC extends Component {
constructor(props){
super(props);
this.state={currentTime: null, currentDay: null, longitude: 0, latitude: 0, error: null }
this.daysArray = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];

}

async componentDidMount(){
let result = await this._getUserId();
}


_getUserId = async() => {
  const userId = await AsyncStorage.getItem('authId');
  const isLoggedIn = await AsyncStorage.getItem('isLoggedIn');
  alert(userId,isLoggedIn);
}


render(){
}
}
1 голос
/ 14 октября 2019

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

componentDidMount() {
    AsyncStorage.getItem('key', (error, result) => {        
        if (error) {
           //do something
        } else {
            //parse the data
        }
    });
}
...