反应本机 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 {
"accuracy": 14.409000396728516,
"altitude": 2233,
"heading": 80.9710693359375,
"latitude": -------,
"longitude": -------,
"speed": 0.003523211693391204,
}

---

我意识到这个对象有一个尾随逗号，所以无效，所以我继续字符串化它并获取一个有效的 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

首先，当您收到错误和请求结果时，您不应该使用相同的对象

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

此错误似乎来自此，您正在尝试解析但遇到错误。 其次，结果已经是JSON格式，所以字符串化和解析是不必要的，你能提供一个代码片段吗？