我正在尝试使用 this API 来显示星图以显示星图。如果您查看超链接，则有两部分表示经度={number}&latitude={number}。我决定从组件中获取用户经度和纬度，并相应地设置纬度和经度。我得到了经度和纬度，但我无法得到字符串连接（我现在会解释）

为了显示这个星图，我使用了组件。我创建了一个名为 path 的变量，它是我的用户输入的纬度和经度的 API 链接，但只是不会更新。我尝试打印出我的纬度和经度，它们是常规整数。当我打印出路径时，它说经度= [Object object]&latitude = [Object object]。

我将发送我的代码、GitHub 存储库链接和控制台输出

GitHub 存储库：repo link

code:const path 就是你想看的那一行

import React from 'react'
import { View,Dimensions,Text,Platform,StatusBar,TouchableWithoutFeedback,KeyboardAvoidingView,StyleSheet,SafeAreaView,TextInput,Keyboard } from 'react-native'
import {Header} from 'react-native-elements'
import {WebView} from 'react-native-webview'

export default class StarMapScreen extends React.Component {
  constructor() {
    super()
    this.state = {
      longitude: 100,latitude: 0,//path: "https://virtualsky.lco.global/embed/index.html?longitude=0&latitude=0&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true"
    }
  }
  render() {
    const {longitude,latitude} = this.state
    console.log(longitude)
    console.log(latitude)
    const path = 'https://virtualsky.lco.global/embed/index.html?longitude='+{longitude}+'&latitude='+{latitude}+'&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true'
    console.log(path)
    return(
      <KeyboardAvoidingView behavior  = {Platform.OS === "ios" ? "padding" : "height"} style = {{flex:1,alignItems:'center'}}>
        
          
            <TouchableWithoutFeedback  onPress = {Keyboard.dismiss} accessible={false}>
              <View>
                <TextInput 
                  multiline = {true}
                  style = {styles.inputBox}
                  placeholder = "Latitude"
                  onChangeText = {text => {
                    this.setState({latitude:text})}}/>
              </View>
            </TouchableWithoutFeedback>
            
            <TouchableWithoutFeedback  onPress = {Keyboard.dismiss} accessible={false}>
              <View>
                <TextInput 
                  multiline = {true}
                  style = {styles.inputBox}
                  placeholder = "Longitude"
                  onChangeText = {text => {
                    this.setState({longitude:text})}}/>
              </View>
            </TouchableWithoutFeedback>
          
          <WebView 
            style={{marginTop:20,marginBottom:20,width:Dimensions.get('window').width}}
            //scalesPageToFit = {true}
            source={{ uri: path}}/>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  droidSafeArea: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  },inputView: {
    backgroundColor:"#480ca8",alignItems:'center',alignContent:'center',justifyContent:'center'
  },starText: {
    textAlign:'center',color:'white',fontWeight:'bold',fontSize:20
  },inputBox: {
    width:400,height:40,borderColor:'white',borderRadius:30,borderWidth:2,justifyContent:'center',textAlign:'center',fontSize:20,marginTop:10
    
  }
})```

这是输出的console.logs

https://virtualsky.lco.global/embed/index.html?longitude${longitude}=&latitude${latitude}=&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
0
https://virtualsky.lco.global/embed/index.html?longitude=[object Object]&latitude=[object Object]&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
1
https://virtualsky.lco.global/embed/index.html?longitude=[object Object]&latitude=[object Object]&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
12