未处理的承诺拒绝: ReferenceError找不到变量

Question

我对Javascript有点陌生，我不能解决这个错误.为了根据用户输入从API服务器获取数据，我尝试使用异步函数。默认的this.state.location是"Boston"。我正在尝试将this.state.location更改为用户输入值。不知道为什么我会犯这个错误..。我正在使用异步等待好吗？

下面是代码：

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&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;

这是我遇到的错误：

[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

谢谢你的帮忙!

Answer 1

weatherData是类实例上的一个属性。

它不是一个变量(范围内或其他方面)。

您需要使用this.weatherData访问它。