Recibí este error al obtener datos de una API para mi aplicación. Revisé mi consola y obtuve el token correctamente, pero recibí este error. Ya usé AsyncStorage.clear(); al inicio de la aplicación
useEffect(() => { AsyncStorage.clear(); });pero el error sigue apareciendo. Todavía puedo obtener los datos a pesar de que ese error está ahí, así que lo ignoré un poco, pero ahora no puedo actualizar mis datos debido al token inesperado.
Inicio index.js (este es el archivo que intenta obtener datos)
import AsyncStorage from '@react-native-async-storage/async-storage'; import React, {useEffect, useState} from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; import {Button, Gap, Header} from '../../components'; import {colors, getData} from '../../utils'; export default function Home({navigation}) { const [profile, setProfile] = useState({ name: '', email: '', phone_number: '', }); const [data, setData] = useState([]); const [token, setToken] = useState(''); useEffect(() => { getData('token').then(res => { const res_token = res; console.log('getting token data response at home: ', res_token); setToken(res_token); }); fetch('https://emaillead.aturtoko.id/api/v1/profile', { method: 'GET', headers: { Accept: 'application/json', 'Content-Type': 'application/json', Authorization: `Bearer${token}`, }, }) .then(response => response.json()) .then(json => { console.log('token auth: ' + token); setProfile({ name: json.user.name, email: json.user.email, phone_number: json.user.phone_number, }); //setData(json); console.log(json); }) .catch(error => console.error(error)); }, [token]); return ( <View style={styles.page}> <Header title="User Data" /> <Text style={styles.text}>Nama: {profile.name}</Text> <Gap height={20} /> <Text style={styles.text}>Email: {profile.email}</Text> <Gap height={20} /> <Text style={styles.text}>Nomor Telepon: {profile.phone_number}</Text> <Gap height={40} /> <Button title="Lihat Campaign" onPress={() => navigation.navigate('Campaign')} /> </View> ); }Creo que el problema puede estar entre getData y fetch. Debe organizar el orden de las solicitudes utilizando esperar o encadenar con el método .then, o no tendrá res_token cuando obtenga datos.
useEffect(() => { getData('token').then(res => { const res_token = res; console.log('getting token data response at home: ', res_token); return res_token }).then((res_token) => { // do the fetch when res_token is already got }) }, []);No pude resolver el problema porque necesito más contexto, por ejemplo, ha llamado a la función getData que no está presente en su código.
De todos modos, creo que deberías tener en cuenta lo siguiente:
El error que está recibiendo no está necesariamente relacionado con la variable de estado "token" que está utilizando. Este error generalmente se produce cuando JavaScript intenta analizar una cadena JSON con formato incorrecto.
Por ejemplo, puede reproducir el mismo error en la consola del navegador usando la siguiente sintaxis.
JSON.parse("User") // VM193:1 Uncaught SyntaxError: Unexpected token U in JSON at position 0.