ReferenceError:Can't find variable:weatherCondition

Question

我正在开发一个天气应用程序，它为 WeatherAPI 的 json 文件获取温度和天气条件。我得到错误 "ReferenceError:Can't find variable:weatherCondition"。如果我只使用温度变量，我会得到同样的错误 "ReferenceError:Can't find variable:temperature" 您可以在此处找到教程：https://blog.expo.io/building-a-minimalist-weather-app-with-react-native-and-expo-fe7066e02c09?gi=908ae5fd913d

这是App.js代码

import React from 'react';
import { StyleSheet, Text, View,Animated } from 'react-native';
import {API_KEY} from "./utils/WeatherAPIKey";
import Weather from './components/Weather';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading:false,
      temperature: 0,
      weatherCondition: null,
      error: null
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.fetchWeather(position.coords.latitude, position.coords.longitude);
      },
      error => {
        this.setState({
          error: 'Error Getting Weather Condtions'
        });
      }
    );
  }

  fetchWeather(lat = 25, lon = 25) {
    fetch(
      `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(json => {
        //console.log(json);
        this.setState({
          temperature:json.main.temp,
          weatherCondition:json.weather[0].main,
          isLoading:false
        })
      });
  }
  render() {
    const { isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? 
        (
          <Text>Fetching the weather</Text>
        ) : (
          <Weather weather={weatherCondition} temperature={temperature}/>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});


This is my Weather.js code

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const Weather = ({temperature,weatherCondition}) => {
  return (
    <View style={styles.weatherContainer}>
      <View style={styles.headerContainer}>
        <MaterialCommunityIcons size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}>{temperature}˚</Text>
      </View>
      <View style={styles.bodyContainer}>
        <Text style={styles.title}>weatherCondition</Text>
        <Text style={styles.subtitle}>It hurts my eyes!</Text>
      </View>
    </View>
  );
};

Answer 1

添加这个

render() {
    const { isLoading, temperature } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? 
        (
          <Text>Fetching the weather</Text>
        ) : (
          <Weather weather={weatherCondition} temperature={temperature}/>
        )}
      </View>
    );
  }

Answer 2

更新答案

发生了一些变化，但希望这能给您一个想法。这对我有用，它也应该对你有用。在此答案的评论中，您附上了一张带有未找到变量错误的图像。那是因为你没有将状态传递给正确的道具。请关注这个。

App.js 文件

import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';
import Weather from './Weather';


export default class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isLoading:true,
            temperature: 0,
            weatherCondition: null,
            error: null
        }
    }

    componentDidMount() {
        // navigator.geolocation.getCurrentPosition(
        //     position => {
        //         this.fetchWeather(position.coords.latitude, position.coords.longitude);
        //     },
        //     error => {
        //         this.setState({
        //             error: 'Error Getting Weather Condtions'
        //         });
        //     }
        // );
        this.fetchWeather();
    }


    fetchWeather() {

        fetch(
            `http://api.openweathermap.org/data/2.5/weather?lat=25&lon=25&APPID=a934bb6a3b87e7ac54ed10969b14d80b&units=metric`
        )
            .then(res => res.json())
            .then(json => {
                //console.log(json);
                this.setState({
                    temperature:json.main.temp,
                    weatherCondition:json.weather[0].main,
                    isLoading:false
                })
            });
    }


    render() {
        const { isLoading, temperature } = this.state;
        return (
            <View style={styles.container}>
                {isLoading ?

                        <Text>Fetching the weather</Text>
                     :
                        <Weather temperature={temperature}/>
                    }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

最后，这里是 Weather.js 文件

Weather.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class Weather extends React.Component{


    render(){

            return (
                <View>
                    <Text>{this.props.temperature}</Text>
                </View>
            );
   }

}

您未定义的原因是因为您的 weather.js 文件。我不确定它看起来像什么，因为您发布了一个非常简单的示例，但我的示例应该可以帮助您更好地理解 props 的工作原理以及如何传递它。基本上 this.props.temparature 应该在 weather.js 内，从而使它成为一个易于使用的道具。您也可以按照相同的原则制作 weatherCondition 道具。

因为我不知道你的实际文件是如何布局的，所以这是一个最小的例子。希望这能解决问题。这个对我有用。 :)

ReferenceError:Can't find variable:weatherCondition

ReferenceError:Can't find variable:weatherCondition

weather-api

react-native

openweathermap

expo