Javascript 关于如何在render（）中引用状态变量的快速问题-React Native

我认为这是一个简单的语法问题，但也许这是一个更大的概念，关于层次结构和继承我不理解

我正在react native（expo）中创建一个应用程序。我想显示一个以用户为中心的地图，该地图会持续更新（我最终会使用watchCurrentPositionAsync，但由于我是新手，我只想尝试收集一次位置信息，然后从中找出答案）。当输入纬度和经度的原始值时，下面的代码成功地显示了地图，但我似乎无法从状态对象中提取值以在render（）中使用

此处标有

//的行

是我想使用保存在我的状态对象中的lat/long值的地方-现在我将它们设置为常量，以便我的应用程序能够正常运行

我已尝试将这些常量替换为：

this.state.initLat_s
this.state[initLat_s]

我尝试过创建另一个结构“regData”，并以多种方式引用它，包括引用它以获取initialRegion的所有信息，包括delta

我创建了状态内外的“get（）”函数，这会引发错误

我曾尝试使用正确的值创建“全局”变量（例如lat_g），并使用this.lat_g、lat_g和许多其他语法引用它们，但我无法让编译器从render中理解对状态变量的引用

export default class App extends React.Component {

  state = { //state set
    locationResult: null, //location result holds either location object converted to string or error message as string 
    locationStatus: null, //holds success status of location grab
    initLat_s: null, //holds initial latitude and longitude of user location
    initLon_s: null
  }; 
  
  componentDidMount() {this._getLocationAsync();} //if component mounts, run location grabber
    
  _getLocationAsync = async () => { //location grabber
    let { status } = await Permissions.askAsync(Permissions.LOCATION); //ask for location perms
    if (status !== "granted") { //if location perms denied, set locationResult accordingly
      this.setState({locationResult: "Permission to access location was denied"});
      this.setState({locationStatus: false});
    } else {
      let initLocation = await Location.getCurrentPositionAsync({}); //otherwise, save location object in "location" var
      this.setState({locationResult: JSON.stringify(initLocation)}); //set locationResult to string representation of location
      this.setState({locationStatus: true});

      let {initLat, initLon} = initLocation.coords; //gather lat/lon from location object
      this.setState({initLat_s: initLat}); //set lat/lon in state accordingly
      this.setState({initLon_s: initLon});
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView 
          style={styles.mapStyle}
          initialRegion={{
            latitude: -30,     //RIGHT HERE
            longitude: 120,    //RIGHT HERE
            latitudeDelta: .01,
            longitudeDelta: .01 
          }}
        />
      </View>
    );
  }
}

导出默认类App扩展React.Component{
状态={//状态集
locationResult:null，//location result保存转换为字符串的位置对象或作为字符串的错误消息
locationStatus:null，//保存位置抓取的成功状态
initLat_s:null，//保存用户位置的初始纬度和经度
initLon_s:null
}; 
componentDidMount（）{this.\u getLocationAsync（）；}//如果组件装载，请运行位置抓取器
_getLocationAsync=async（）=>{//位置抓取器
let{status}=wait Permissions.askAsync（Permissions.LOCATION）；//请求位置perms
如果（状态！==“已授予”）{//如果位置perms被拒绝，则相应地设置locationResult
this.setState（{locationResult:“访问位置的权限被拒绝”}）；
this.setState（{locationStatus:false}）；
}否则{
让initLocation=wait Location.getCurrentPositionAsync（{}）；//否则，将Location对象保存在“Location”变量中
this.setState（{locationResult:JSON.stringify（initLocation）}）；//将locationResult设置为位置的字符串表示形式
this.setState（{locationStatus:true}）；
让{initLat，initLon}=initLocation.coords；//从location对象收集lat/lon
this.setState（{initLat_s:initLat}）；//相应地将lat/lon设置为状态
this.setState（{initLon_s:initLon}）；
}
};
render（）{
返回(
);
}
}

您可以尝试这种方法

构造函数（道具）{
超级（道具）；
此.state={
locationResult:null，//location result保存转换为字符串的位置对象或作为字符串的错误消息
locationStatus:null，//保存位置抓取的成功状态
initLat_s:null，//保存用户位置的初始纬度和经度
initLon_s:null
}
}

您可以尝试这种方法

构造函数（道具）{
超级（道具）；
此.state={
locationResult:null，//location result保存转换为字符串的位置对象或作为字符串的错误消息
locationStatus:null，//保存位置抓取的成功状态
initLat_s:null，//保存用户位置的初始纬度和经度
initLon_s:null
}
}

试试这个，它会对你有用

    // Initial state shouldn't be a **null** because initialRegion.latitude and 
   // initialRegion.longitude are marked as required
    
        state = {
            initLat_s: -30, 
            initLon_s: 120,
          };
        <MapView
                  initialRegion={{
                    latitude: this.state.initLat_s, // Without {}
                    longitude: this.state.initLon_s, // Without {}
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                  }}
                />

//初始状态不应为**null**，因为initialRegion.latitude和
//initialRegion.longitude根据需要进行标记
状态={
初始值：-30，
初始值：120，
};

试试这个，它会对你有用

    // Initial state shouldn't be a **null** because initialRegion.latitude and 
   // initialRegion.longitude are marked as required
    
        state = {
            initLat_s: -30, 
            initLon_s: 120,
          };
        <MapView
                  initialRegion={{
                    latitude: this.state.initLat_s, // Without {}
                    longitude: this.state.initLon_s, // Without {}
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                  }}
                />

//初始状态不应为**null**，因为initialRegion.latitude和
//initialRegion.longitude根据需要进行标记
状态={
初始值：-30，
初始值：120，
};

不，这是我尝试的第一件事，因为我假设这是JavaScript的正确语法，但它似乎不起作用：/它在expo中给出了“意外的关键字‘this’”，而在VSCode中，它从编译器中给出了“：expected”：No，这是我尝试的第一件事，因为我假设这是JavaScript的正确语法，但它似乎不起作用：/它在expo中给出了“意外关键字‘this’”，在VSCode中它给出了：expected“来自编译器”。幸运的是，我尝试了这个，它产生了与我在回复Aymen时提到的相同的错误—“意外关键字‘this’”，也许这与您的状态属性无关，但是，相反，可能缺少构造函数和超级道具。我不太清楚你的意思。“App”类是否需要构造函数？有什么地方我能读到更多关于这方面的信息吗？另外，我不太清楚“超级道具”是什么意思。请查看更新的答案。这很有效，谢谢！我没有意识到我需要创建构造函数：）。“location grabber”函数仍然不起作用，因此它只是默认为状态对象中设置的任何值，而不是从用户收集的值，这是一个单独的问题。谢谢不幸的是，我尝试了这个，它产生了与我在回答Aymen时提到的相同的错误——“意外的关键字‘this’”。也许这与您的状态属性无关，但可能缺少构造函数和超级属性。我不太清楚您的意思。“App”类是否需要构造函数？有什么地方我能读到更多关于这方面的信息吗？另外，我不太清楚“超级道具”是什么意思。请查看更新的答案。这很有效，谢谢！我没有意识到我需要创建构造函数：）。“地点”