Question

我有一个简单的组件，我试图将当前的纬度和经度传递给MapView。

如果我退出lastPosition，我会收到以下内容：

{
  "coords": {
    "speed": -1,
    "longitude": -122.239853,
    "latitude": 37.235444,
    "accuracy": 5,
    "heading": -1,
    "altitude": 0,
    "altitudeAccuracy": -1
  },
  "timestamp" 235436345433454
}

所以我知道它正在工作，但是为什么它在我的渲染函数中遇到MapView时会说null？

export default class Map extends Component {
  constructor (props) {
    super (props)
    this.state = {
      initialPosition: {
        coords: {
          longitude: 0,
          latitude: 0
        }
      },
      lastPosition: null,
      error: null
    }
  }

  watchID: ?number = null

  componentDidMount () {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        var initialPosition = JSON.stringify(position)
        this.setState({initialPosition})
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    )
    this.watchID = navigator.geolocation.watchPosition(
      (position) => {
        var lastPosition = JSON.stringify(position)
        this.setState({lastPosition})
      }
    )
  }

  componentWillUnmount () {
    navigator.geolocation.clearWatch(this.watchID)
  }

  render () {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: this.state.lastPosition.coords.latitude,
            longitude: this.state.lastPosition.coords.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    );
  }
}

Answer 1

第一次渲染this.state.lastPosition时为空，所有地狱都会丢失。抛出异常并反应中断。您只需将lastPosition设置为正确的数据一旦到达。

您需要检查您想要获得的点coords。

<MapView
          style={styles.map}
          initialRegion={{
            latitude: this.state.lastPosition ?
 this.state.lastPosition.coords.latitude : 0,
            longitude: this.state.lastPosition ?
 this.state.lastPosition.coords.longitude : 0,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />

您可能希望在获取数据时显示加载程序，而不是将其设置为零。但我希望你明白这一点。

Answer 2

您正在使用JSON.stringify（position）将对象转换为字符串，然后将其作为字符串存储在状态中。

您确定这是您想要做的吗？因为这解释了为什么坐标不明确。

状态在React中返回NULL

2 个答案: