Я пытаюсь заставить консоль регистрировать данные от ввода города и страны в textInput с помощью react-native с помощью Open Weather Maps API. Каждый раз, когда я ввожу город или страну в поля, я получаю «no city 404». Однако, если я жестко запрограммирую один, где находятся строки для const city и const country, я получу желаемый результат. Я не уверен, что делаю не так. Я пробовал несколько разных методов и гуглил, пока мои глаза не стали красными, но я застрял. Я знаю API, и все работает, потому что я могу жестко кодировать вещи. Я размышляю об этом в моем Form.JS.
Любая помощь приветствуется. Заранее спасибо!
Это мой файл App.js
//import a library to help create a component
import React, { Component } from 'react';
import { View, AppRegistry } from 'react-native';
//import components
import Header from './src/components/Header';
import Form from './src/components/Form';
import Weather from './src/components/Weather';
//API KEY from Open Weather Maps
const API_KEY = 'cad2d6dddccc9804f43e7c3af9e56f52';
const city = '';
const country = '';
export default class App extends Component {
getWeather = async (e) => {
e.preventDefault();
const api_call = await
fetch(`https://api.openweathermap.org/data/2.5/weather?
q=${city},${country}&appid=${API_KEY}&units=metric`);
const data = await api_call.json();
console.log(data);
}
render() {
return (
<View >
<Header headerText='Weather Fetcher' />
<Form
getWeather={this.getWeather}
city={this.city}
country={this.country}
/>
<Weather />
</View>
);
}
}
Это мой файл Form.js.
import React, { Component } from 'react';
import { TextInput, View, StyleSheet, Text, TouchableOpacity } from
'react-native';
export default class Form extends Component {
render() {
return (
<View style={styles.viewPut}>
<Text style={styles.textStyle}>City</Text>
<TextInput
style={styles.textInput}
value={this.city}
/>
<Text style={styles.textStyle}>Country</Text>
<TextInput
style={styles.textInput}
value={this.country}
/>
<TouchableOpacity
onPress={this.props.getWeather}
>
<Text> Fetch My Weather </Text>
</TouchableOpacity>
</View>
);
}
}