Question

我正在尝试从手机中获取位置信息，然后将其发送到API，到目前为止，一切正常，直到我尝试访问数据的每个值。

到目前为止，这是我的代码。

git pull

我从手机接收的数据是这样显示的。

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

我意识到该对象具有逗号结尾，因此是无效的，因此我继续对其进行字符串化处理并获取有效的JSON，以便可以执行Object { "accuracy": 14.409000396728516, "altitude": 2233, "heading": 80.9710693359375, "latitude": -------, "longitude": -------, "speed": 0.003523211693391204, }，但每次尝试此错误都会出现。

JSON.parse()

我真的不知道该如何进行，所以如果你们能帮助我，我将不胜感激。

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格式，因此不需要进行字符串化和解析，请您提供一个代码段吗？

响应本机JSON解析错误意外标识符

2 个答案: