I am kind of new to Javascript and I cannot solve this error... I am trying to use async functions in order to fetch data from API server based on user input. The default this.state.location is "Boston". And I am trying to change this.state.location to user input value. Not sure why I got this error.. Am I using async await good?

Here's the code:

import React, { Component } from "react";
import { View, Text, Button, StyleSheet, TextInput } from "react-native";

const Separator = () => <View style={styles.separator} />;

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      location: "Boston",
      result: [],
      isLoading: true,
    };
  }

  async getWeatherData() {
    // Weather API
    // documentation: https://www.visualcrossing.com/resources/documentation/weather-api/timeline-weather-api/
    const url =
      "https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/"  
      this.state.location  
      "/next7days?unitGroup=us&key=LB9VYC553N4BPASN786Z7CRDZ&contentType=json";
    const result = await fetch(url);
    const resultJson = await result.json();
    return resultJson;
  }

  weatherData = async () => {
    let result = await getWeatherData();
    return result;
  }

  async componentDidMount() {
    let result_data = await weatherData();
    this.setState({ result: result_data, isLoading: false });
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View>
          <Text>Loading data...</Text>
        </View>
      );
    } else {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TextInput
            style={styles.input}
            placeholder="Enter location"
            onChangeText={(location) => this.setState({ location })}
            value={this.state.location}
          />
          <Button
            title="Weather"
            onPress={() => {
              this.props.navigation.navigate("Weather", {
                day0_datetime: this.state.result.days[0].datetime,
                day0_icon: this.state.result.days[0].icon,
                day0_tempmin: this.state.result.days[0].tempmin,
                day0_tempmax: this.state.result.days[0].tempmax,
                day1_datetime: this.state.result.days[1].datetime,
                day1_icon: this.state.result.days[1].icon,
                day1_tempmin: this.state.result.days[1].tempmin,
                day1_tempmax: this.state.result.days[1].tempmax,
                day2_datetime: this.state.result.days[2].datetime,
                day2_icon: this.state.result.days[2].icon,
                day2_tempmin: this.state.result.days[2].tempmin,
                day2_tempmax: this.state.result.days[2].tempmax,
                day3_datetime: this.state.result.days[3].datetime,
                day3_icon: this.state.result.days[3].icon,
                day3_tempmin: this.state.result.days[3].tempmin,
                day3_tempmax: this.state.result.days[3].tempmax,
                day4_datetime: this.state.result.days[4].datetime,
                day4_icon: this.state.result.days[4].icon,
                day4_tempmin: this.state.result.days[4].tempmin,
                day4_tempmax: this.state.result.days[4].tempmax,
              });
            }}
          />
          <Separator />
          <Button
            title="Daily Fashion"
            disabled
            color="#f194ff"
            onPress={() => {
              this.props.navigation.navigate("DailyFashion", {
                day0_datetime: this.state.result.days[0].datetime,
                day0_icon: this.state.result.days[0].icon,
                day0_tempmin: this.state.result.days[0].tempmin,
                day0_tempmax: this.state.result.days[0].tempmax,
              });
            }}
          />
          <Separator />
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  separator: {
    marginVertical: 8,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default Home;

Here's the error I got:

[Unhandled promise rejection: ReferenceError: Can't find variable: weatherData]
at node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
at node_modules/metro-runtime/src/polyfills/require.js:655:10 in setTimeout$argument_0

Thanks for your help!

CodePudding user response：

weatherData is a property on the instance of the class.

It isn't a variable (in scope or otherwise).

You need to access it with this.weatherData

CodePudding user response：

you should use try/catch like this example: https://stackoverflow.com/a/40886720/17024672, also you have'nt declared weatherData before assigning a function expression to it. try adding const before weatherData.