react-native中数据对象的空输出答案

【问题标题】：Null output from data object in react-nativereact-native中数据对象的空输出
【发布时间】：2018-10-05 20:54:56
【问题描述】：

我正在尝试让控制台使用 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

【问题讨论】：

标签： reactjs react-native react-props

【解决方案1】：

您需要为 TextInput 提供一个事件休眠功能，并在组件状态下管理其值。这就是你应该如何处理 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 组件中是没有意义的。因为在 App 组件中不使用 getWeather 功能，所以我建议您移动该功能 Form 组件并将 setState 设置为城市和国家值并使用文本字段

【讨论】：

@Marsel Gray 欢迎您。您能否接受并支持答案，以便对未来的读者有所帮助

【解决方案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})} />

【讨论】：