如何在 React Native 上使用 TextInput 从 Api 获取数据？答案

【问题标题】：How to get data from Api in TextInput use on React Native?如何在 React Native 上使用 TextInput 从 Api 获取数据？
【发布时间】：2018-12-23 14:58:39
【问题描述】：

我在调用函数时从 API 获取数据时遇到 TextInput 的一些问题，我声明它来获取 API 并根据输入获取数据

我有一个警告

找不到变量 searchInput

并且我在状态中定义了搜索输入并将它们放入输入的值，我认为代码是对的还是什么？

代码

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  LinearGradient,
  ActivityIndicator,
  TouchableOpacity
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

export default class Search extends Component {
  constructor() {
    super();
    this.ApiKey = "****";
    this.state = {
      searchInput: "",
      searchResult: null,
      error: "",
      isLoading: false
    };
  }

  searchCity = async () => {
    this.setState({
      isLoading: true
    });
    const url = `http://api.openweathermap.org/data/2.5/weather?q=${searchInput}&units=metric&appid=${
      this.ApiKey
    }`;
    await fetch(url)
      .then(res => res.json())
      .then(responseJson =>
        this.setState({
          isLoading: false,
          searchResult: {
            name: responseJson.name,
            country: responseJson.sys.country,
            main: responseJson.weather[0].main,
            description: responseJson.weather[0].description,
            temp: responseJson.main.temp
          }
        })
      )
      .catch(error => this.setState({ error }));
  };

  render() {
    const { searchInput, searchResult, isLoading, error } = this.state;

    if (!isLoading) {
      return (
        <View
          style={{
            backgroundColor: "#2b3654",
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          {isLoading && <Text style={styles.Text}> Loading...</Text>}
          <ActivityIndicator size="large" color="00ff00" />
        </View>
      );
    } else if (error) {
      return (
        <View>
          <Text>{error}</Text>
        </View>
      );
    }
    if (searchResult) {
      return (
        <LinearGradient colors={["rgba(0,0,0,0.05)", "rgba(0,0,0,0)"]}>
          <View>
            <Text>{searchResult.name}</Text>
            <Text> {searchResult.main}</Text>
            <Text> {searchResult.description}</Text>
            <Text> {searchResult.temp}</Text>
          </View>
        </LinearGradient>
      );
    } else {
      return (
        <View style={styles.container}>
          <View style={styles.searchSection}>
            <TouchableOpacity onPress={this.searchCity}>
              <Icon
                style={styles.searchIcon}
                name="ios-search"
                size={15}
                color="#fff"
              />
            </TouchableOpacity>
            <TextInput
              style={styles.input}
              placeholder="Find Your City.."
              placeholderTextColor="#fff"
              underlineColorAndroid="transparent"
              autoCapitalize="none"
              onChangeText={searchInput => {
                this.setState({ searchInput });
              }}
              onSubmitEditing={this.searchCity}
              value={searchInput}
            />
          </View>
        </View>
      );
    }
  }
}

【问题讨论】：

标签： javascript android reactjs react-native redux

【解决方案1】：

你需要使用this.state.searchInput

该行应该是：

const url = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.searchInput}...`;

【讨论】：

【解决方案2】：

问题出在您的 URL 中，您在那里使用了 searchInput... 使用this.state.searchInput 或者你可以使用解构

const { searchInput } = this.state;

const url = `http://api.openweathermap.org/data/2.5/weather?q=${searchInput}&units=metric&appid=${
          this.ApiKey
        }`;

【讨论】：