Нулевой вывод из объекта данных в реагирующем - PullRequest
Новая
       57

Нулевой вывод из объекта данных в реагирующем

0 голосов
/ 05 октября 2018

Я пытаюсь, чтобы консоль записывала данные о вводе города и страны в текстовый вход с реагирующим родом с помощью API Open Weather Maps.Всякий раз, когда я вписываю в поле город и страну, я получаю «нет города 404».Однако, если я жестко закодирую строку, в которой находится строка для const city и const country, я получу желаемую прибыль.Я не уверен, что я делаю неправильно.Я пробовал несколько разных методов и гуглил, пока мои глаза не покраснели, но я застрял.Я знаю API, и все работает, потому что я могу жестко кодировать вещи.Это что-то в моей форме. 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>

);
}
}

Приложение, которое я делаю

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Во-первых, не делайте что-то подобное 

const city = '';
const country = '';

Вы можете просто использовать переменные состояния, такие как это 

constructor(props){
   super(props)

   this.state = {
     city: '',
     country: '',
   }
}

Затем используйте TextInput, как это 

         <TextInput
            {...this.props}
            ref={comp => (this.input = comp)}
            style={[styles.valueText]}
            value={this.state.country}
            onChangeText={value => this.setState({country: value})} />
0 голосов
/ 06 октября 2018

Вам необходимо иметь функцию ожидания события для TextInput и управлять ее значением в состоянии компонента.Вот как вы должны работать с текстовыми полями в React

Взгляните на исправленный код компонента Form 

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

   export default class Form extends Component {
       constructor(props){
          super(props);
          this.state={
            city: '',
            country:''
          }
       }

       handleCity = event => {
          this.setState({
               city: event.target.value
          })
      }

      handleCountry = event => {
          this.setState({
             country: event.target.value
          })
      }
     render() {
        return (
          <View style={styles.viewPut}>
             <Text style={styles.textStyle}>City</Text>
             <TextInput
                style={styles.textInput}
                value={this.state.city} 
                onChange={this.handleCity}       
             />

           <Text style={styles.textStyle}>Country</Text>
          <TextInput
             style={styles.textInput}
             value={this.state.country}
            onChange={this.handleCountry}
          />
        <TouchableOpacity
           onPress={this.props.getWeather}
         >
          <Text> Fetch My Weather </Text>
       </TouchableOpacity>
   </View>

   );
   }
   }

Также вам следует переместить функцию getWeather из приложения в компонент Form, так как это не имеет смыслаиметь его в компоненте приложения.Поскольку функциональность getWeather не используется в компоненте приложения, поэтому я бы порекомендовал вам переместить эту функцию в компонент Form, задать setState для значений города и страны и поиграть с текстовыми полями

...