如何修复不起作用的字符串连接？

Question

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

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

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

GitHub 存储库：存储库链接

代码：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',
    color:'white',
    fontWeight:'bold',
    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