Question

我正在尝试让控制台使用Open Weather Maps API将来自输入城市和国家/地区的数据记录到带有react-native的textInput中。每当我在字段中输入城市和国家/地区时，都会显示“无城市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>

);
}
}

The App I'm Making

Answer 1

您需要为TextInput具有事件ha sleep功能，并在组件状态下管理其值。那就是您应该如何在React中处理文本字段

看看更正后的表单组件代码

   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函数从App移至Form组件，因为将它包含在App组件中没有意义。由于AppWeather组件中未使用getWeather功能，因此我建议您移动该函数的Form组件，并将setState设置为城市和国家/地区值，并使用文本字段进行播放

Answer 2

首先不要做类似的事情

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})} />

无法使用React-native

2 个答案: