Question

我正在开发一个Weather App，它为WeatherAPI的json文件使用温度和weatherCondition。我收到错误“ ReferenceError：找不到变量：weatherCondition”。如果仅采用温度变量，则会收到相同的错误“ ReferenceError：找不到变量：温度” 您可以在此处找到该教程：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

添加此

UITextField

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文件。我不确定您发布了一个非常简单的示例后的样子，但是我的应该可以帮助您更好地了解道具的工作原理以及如何通过它。基本上this.props.temparature应该在weather.js内，从而使其成为易于使用的道具。您也可以遵循相同的原则来制作weatherCondition道具。

由于我不知道您实际文件的布局，因此这是一个最小的示例。希望这可以解决问题。这个对我有用。：）

ReferenceError：找不到变量：weatherCondition

2 个答案: