React Native - JSON中位置0的意外令牌U

Posted 2023-02-16

【中文标题】React Native - JSON中位置0的意外令牌U

【英文标题】：React Native - Unexpected token U in JSON at position 0

【发布时间】：2021-12-21 02:45:33

【问题描述】：

从 API 获取数据到我的应用程序时出现此错误。我检查了我的控制台，实际上我得到了正确的令牌，但我得到了这个错误。我已经使用了 AsyncStorage.clear();在应用程序的开头

useEffect(() => 
    AsyncStorage.clear();
  );

但错误仍然出现。即使存在该错误，我仍然可以获取数据，所以我有点忽略了它，但现在我无法更新我的数据，因为出现了意外的令牌。

首页 index.js（这是试图获取数据的文件）

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>
  );

这是控制台+错误信息

【参考方案1】：

我无法找出问题所在，因为我需要更多上下文，例如，您调用了代码中不存在的 getData 函数。

无论如何，我认为你应该注意以下几点：

您遇到的错误不一定与您使用的“令牌”状态变量有关。当 javascript 尝试解析格式错误的 JSON 字符串时，通常会引发此错误。

例如，您可以使用以下语法在浏览器控制台中重现相同的错误。

JSON.parse("User") // VM193:1 Uncaught SyntaxError: Unexpected token U in JSON at position 0.

【参考方案2】：

我认为问题可能出在 getData 和 fetch 之间。你应该使用 await 或 chain with .then 方法来安排请求的顺序，否则你在获取数据时将没有 res_token。

  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
    )
 
  , []);