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

【问题标题】：How to fix my string concatenation that isn't working?如何修复我的字符串连接不起作用？
【发布时间】：2021-08-01 05:05:36
【问题描述】：

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

为了显示这个星图，我使用了组件。我创建了一个名为 path 的变量，它是我的用户输入的纬度和经度的 API 链接，但只是不会更新。我尝试打印出我的纬度和经度，它们是常规整数。当我打印出路径时，它说longitude= [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',
    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

【问题讨论】：

标签： reactjs string react-native

【解决方案1】：

字符串连接的语法不正确。您正在将字符串与对象联系起来。

{longitude} means {longitude : longitude}

有多种方法可以解决此问题

解决方案 1：-

const path = 'https://virtualsky.lco.global/embed/index.html?longitude='+longitude+'&latitude='+latitude+'&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true'

解决方案 2：-

const path = `https://virtualsky.lco.global/embed/index.html?longitude=${longitude}&latitude=${latitude}&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true`

【讨论】：