React Native: AsyncStorage возвращает значение [object Object] (iOS)

Я пытаюсь войти в свой API, сохранить токен и перейти на следующую страницу. Итак, я решил использовать AsyncStorage для сохранения токена, а после этого отправить токен в заголовок для получения данных. См. Класс Login.js:

Login.js

export default class Login extends React.Component {
  constructor (props) {
    super (props);
    this.state = { tokenValue: '' }
  }  
  updateTokenValue= (tv) => { this.setState({tokenValue : tv}); }

  async saveToken() {
    try { await AsyncStorage.setItem('tokenvalue', this.updateTokenValue(this.state.tokenValue)); } 
    catch (error) { console.error('[APIREQUEST] AsyncStorage error: ' + error.message); }
  }

  onLogin() {
  axios.post('http://my-api-url/login', {
        'credential': this.state.txtInputUser,
        'password': this.state.txtInputPassword
    })
    .then((response) => {        
      if (response.status != 200){
        Alert.alert('ERROR’, ‘USER or PASSWORD INVALIDATE’);
      } else {
        console.info("Login success”);
        console.info(response.data.token+" | Status: "+response.status); 
        saveToken(response.data.token); 
               //   open the next screen
        Actions.searchproduct ({
          userID: 0,
        });  
      }
    })
    .catch(function (error) {
        console.info('Error: '+error)
        return;
    });
  }

  render() {
    return (
      <View style = {styles.container}>      
              <TextInput style = {styles.inputFields} value = {'[email protected]'} onChangeText = {txtInputUser => this.setState({txtInputUser})} placeholder = {'Usuário'} placeholderTextColor = {'#9E9E9E'}/>
              <TextInput style = {styles.inputFields} value = {'Blend@03'} onChangeText = {txtInputPassword => this.setState({txtInputPassword})} placeholder = {'Senha'} placeholderTextColor = {'#9E9E9E'}/>           
              <MyButton w = "100%" h = {55} mt = {5} as = "stretch" so = {0.1} ai = "center" bg = "#212121" tc = "#F5F5F5" fs = {22} t = "LOGIN" onPress = {() => this.onLogin()}/>
            </View>
      </View>
    );
  }
}

и мой класс SearchProduct:

SearchProduct.js

//  imports

export default class SearchProduct extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tokenValue: '', };
  }

  getTokenValue= (tv) => { this.setState({tokenValue : tv}); }

  componentDidMount() {
    var valueToken = '';
    try{
      const token = AsyncStorage.getItem('tokenvalue');
      if (token != null) {
        valueToken = token;
        console.info('[SEARCHPRODUCT] Token saved: '+valueToken);
      } else {
        console.info('[SEARCHPRODUCT] Token empty’);
      }
    } catch(error) {
      console.info('[SEARCHPRODUCT] ERROR TO GET THE TOKEN: '+error);
    }

    axios.get('http://my-api-url/listdata’, {
      headers: {
        Authorization: 'Bearer '.concat(valueToken)
      },
    })
    .then((response) => {
      console.info(response);
    })
    .catch((e) => {
        console.info('ERROR TO SYNC: '+e)
    });
  }
//  …
}

А в консоли браузера мне возвращаются следующие данные: [объект Object] OBS: это модель JSON, которая мне вернулась:

{
    "id": "5b048159952a12c06c1d4305",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYmFja29mZmljZSIsImRlbGV0ZWQiOmZhbHNlLCJ1cGRhdGVkQXQiOiIyMDE4LTA1LTI4VDAwOjM4OjM2LjEzN1oiLCJfaWQiOiI1YjA0ODE1OTk1MmExMmMwNmMxZDQzMDUiLCJuYW1lIjoiTW9iaSIsInN1cm5hbWUiOiJEZXYiLCJlbWFpbCI6Im1vYmktZGV2QGJsZW5kbW9iaS5jb20iLCJfc3RvcmVJZCI6IjVhZjQ2MDRlMzMxZTBhMjRjNDM3YWE0ZSIsImlhdCI6MTUyNzQ2NzkxNn0.Yb-ImCWAzv88wtQE65p1Ejv7q8n4rmGsmIsj_DCiSfI"
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
378
1

Ответы 1

Вы можете изменить функцию saveToken, как показано ниже

async saveToken() {
    try { 
       await this.updateTokenValue(this.state.tokenValue);
       await AsyncStorage.setItem('tokenvalue', this.state.tokenValue); 
        } 
     catch (error)
       { 
        console.error('[APIREQUEST] AsyncStorage error: ' + error.message); 
       }
     }

Другие вопросы по теме