Question

我在调用函数声明要从API获取数据并获取数据时，从API获取数据时，TextInput存在一些问题

我有类似

的警告

找不到变量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>
      );
    }
  }
}

Answer 1

您需要使用this.state.searchInput

该行应为：

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

Answer 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
        }`;

如何在React Native上使用TextInput中的Api获取数据？

代码

2 个答案: