Вызов API открытой погоды с React Native - PullRequest
Новая
       37

Вызов API открытой погоды с React Native

0 голосов
/ 01 апреля 2020

Я экспериментирую с открытой погодой. Я пытаюсь заменить внутренний HTML элемента Text на номер температуры. Если я предупреждаю постоянную температуру, я получаю неопределенный .... 

import React, { Component } from 'react';
import { StyleSheet, Button, Alert, Text, View, ImageBackground, TextInput} from 'react-native';
const openweather_api = "https://api.openweathermap.org/data/2.5/weather?q=V&appid=somenumberss&units=metric";

export default class App extends Component {
  state = {};

  componentDidMount(){
    async function getWeather() {
      try {
        const response = await fetch(openweather_api);  
        const json = await response.json();
        console.log(json) // works, it returns the weather data..
        alert(json.main.temp) // works, it returns 2 degrees. 
        this.setState({
          temperature: json.main.temp,
          humidity: json.main.humidity,
        });
        } catch (e) {
        alert('something went wrong')
        }
      }
    getWeather();
  }

  render() {
alert(json.main.temp) // gets undefined.. 
console.log(this.state) // returns {} __proto__.....

  return (
  <View style={styles.container}>
     <Text>Today's temperature is {this.state.temperature} Celcius</Text>
    <Text>{this.state.humidity > 100 && this.state.temperature > 20 ? 'nice weather' : 'bad weather'}</Text>
    </View>
  );
}

}

1 Ответ

1 голос
/ 02 апреля 2020

Развивая его в ответ. Обычный рабочий процесс будет выглядеть примерно так: 

export default class App extends Component {
  state = {
    temperature: 0,
    humidity: 0,
  };

componentDidMount() {
  this.getWeather();
}

function getWeather() {
      fetch(openweather_api).then(res => res.json)
      .then((data) => {
        console.log('data', data)
        this.setState({
          temperature: data.main.temp,
          humidity: data.main.humidity,
        });
    }

render(){
    return(
        <View style={styles.weather}>
          <Text>Today's temperature is {this.state.temperature} Celcius</Text>
          <Text>{this.state.humidity > 100 && this.state.temperature > 20 ? 'It's nice outside, go for a run!' : 'It's too cold to run outside'}</Text>
        </View>
}

И вы вызываете свою функцию в componentDidMount.

Конечно, это не идеально, но вы поняли. Надеюсь, это поможет!

...