React Native JSON 解析錯誤意外的標識符

Question

我正在嘗試從我的手機獲取位置，然后將其發送到 API，到目前為止一切正常，直到我嘗試訪問數據的每個單獨值。

到目前為止，這是我的代碼。

import React, { useEffect, useState} from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import MapView, { Marker }from "react-native-maps";

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

const Untitled1 = (props) => {

  const [errorMessage, setError] = useState(null);
  const [location, setLocation] = useState(null);

  useEffect(() => { 
   (async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      setError({
        errorMessage: 'Ubication service was denied',
      });
    }
    let location = await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.Highest});
    setLocation(location);
   })();
  });

  let valor = 'waiting...';
  if(errorMessage) {
    valor = errorMessage;
  }else if(location){
    valor = JSON.stringify(location);
  }

  reporte = JSON.parse(valor);
  console.log(valor);

  return (
    <View style={styles.container}>
      <Text style={styles.latitud}></Text>
      <Text style={styles.longitud}></Text>
      <Text style={styles.velocidad}></Text>
      <Text style={styles.direccion}></Text>
      <Text style={styles.ciudad}></Text>
      <Text style={styles.calle}></Text>
      <Text style={styles.heading2}>{errorMessage}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  mapView: {
    height: 338,
    width: 657,
    marginLeft: -108
  },
  latitud: {
    fontFamily: "roboto-regular",
    color: "#121212",
    marginTop: 64,
    marginLeft: 45
  },
  longitud: {
    fontFamily: "roboto-regular",
    color: "#121212",
    marginLeft: 45
  },
  velocidad: {
    fontFamily: "roboto-regular",
    color: "#121212",
    marginTop: 26,
    marginLeft: 45
  },
  direccion: {
    fontFamily: "roboto-regular",
    color: "#121212",
    marginTop: -38,
    marginLeft: 45
  },
  ciudad: {
    fontFamily: "roboto-regular",
    color: "#121212",
    fontSize: 40,
    marginTop: 58,
    marginLeft: 88
  },
  calle: {
    fontFamily: "roboto-regular",
    color: "#121212",
    fontSize: 25,
    marginLeft: 131
  }, 
    heading2:{
    color:"#fff",
    margin:5,
    fontWeight:"bold",
    fontSize:15
  },
});

export default Untitled1;

我從手機收到的數據是這樣呈現的。

---

Object {
   "coords": Object {
      "accuracy": 15.28600025177002,
       "altitude": 2233,
       "heading": 0,
       "latitude": -------,
       "longitude": ------,
       "speed": 0,
      },
    "mocked": false,
    "timestamp": 1592163692035,
        }

---

我所做的是以這種方式訪問數據： valor.coords ，這給了我下一個 object：

---

Object {
    "accuracy": 14.409000396728516,
    "altitude": 2233,
    "heading": 80.9710693359375,
    "latitude": -------,
    "longitude": -------,
    "speed": 0.003523211693391204,
  }

---

我意識到這個 object 有一個尾隨逗號，所以是無效的，所以我繼續對其進行字符串化並得到一個有效的 JSON 所以我可以做一個JSON.parse() ，但是這個錯誤每次都會出現。

---

SyntaxError: SyntaxError: JSON Parse error: Unexpected identifier "waiting"

我真的不知道如何繼續這個，所以如果你們能幫助我，我會非常感激你們。

Answer 1

問題就在這里。

let valor = 'waiting...';

if(errorMessage) {
  valor = errorMessage;
}else if(location){
  valor = JSON.stringify(location);
}

reporte = JSON.parse(valor);
console.log(valor);

一種是，您將waiting...解析為JSON.parse() ，這將導致您出現此錯誤。

設置位置只需要很少的時間，並且上面的代碼片段在設置位置之前運行。 這是由於毫秒的差異很小。

所以，請將上面的代碼放入一個useEffect並監聽location的變化。 像這樣，

useEffect(() => {
    let valor = 'waiting...';
    let reporte = null;

    if (errorMessage) {
      valor = errorMessage;
    }
    else if (location) {
      valor = JSON.stringify(location); // If this is already stringyfied, no need to stringify it again.
      reporte = JSON.parse(valor);
    }

    console.log(valor);
  }, [location]);

因此，您的整個文件將如下所示。

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

const Untitled1 = (props) => {
  const [errorMessage, setError] = useState(null);
  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Permissions.askAsync(Permissions.LOCATION);
      if (status !== 'granted') {
        setError({
          errorMessage: 'Ubication service was denied',
        });
      }
      let location = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Highest,
      });
      setLocation(location);
    })();
  }, []);

  useEffect(() => {
    let valor = 'waiting...';
    let reporte = null;

    if (errorMessage) {
      valor = errorMessage;
    }
    else if (location) {
      valor = JSON.stringify(location); // If this is already stringyfied, no need to stringify it again.
      reporte = JSON.parse(valor);
    }

    console.log(valor);
  }, [location]);

  return (
    <View style={styles.container}>
      <Text style={styles.latitud}></Text>
      <Text style={styles.longitud}></Text>
      <Text style={styles.velocidad}></Text>
      <Text style={styles.direccion}></Text>
      <Text style={styles.ciudad}></Text>
      <Text style={styles.calle}></Text>
      <Text style={styles.heading2}>{errorMessage}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapView: {
    height: 338,
    width: 657,
    marginLeft: -108,
  },
  latitud: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    marginTop: 64,
    marginLeft: 45,
  },
  longitud: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    marginLeft: 45,
  },
  velocidad: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    marginTop: 26,
    marginLeft: 45,
  },
  direccion: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    marginTop: -38,
    marginLeft: 45,
  },
  ciudad: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    fontSize: 40,
    marginTop: 58,
    marginLeft: 88,
  },
  calle: {
    fontFamily: 'roboto-regular',
    color: '#121212',
    fontSize: 25,
    marginLeft: 131,
  },
  heading2: {
    color: '#fff',
    margin: 5,
    fontWeight: 'bold',
    fontSize: 15,
  },
});

export default Untitled1;

Answer 2

首先，當您收到錯誤和請求的結果時，您不應該使用相同的 object

SyntaxError: SyntaxError: JSON Parse error: Unexpected identifier "waiting"

此錯誤似乎來自此，您正在嘗試解析但出現錯誤。 其次，結果已經是 JSON 格式，因此不需要進行字符串化和解析，能否提供代碼片段？