Question

我正在尝试使用用户输入来运行搜索，但是当我运行代码时，我的searchInput变量显示为未定义。我不知道我在做什么错。感谢您的帮助！

这是我的代码：

import React, { useState } from "react";
import {
  TouchableOpacity,
  StyleSheet,
  View,
  Modal,
  TextInput
} from "react-native";
import Icon from "react-native-vector-icons/Feather";

import API_KEYS from "../utils/APIKeys";

const SearchScreen = ({ modalVisible, setModalVisible }) => {
  const [searchInput, setSearchInput] = useState("");
  const [searchResults, setSearchResults] = useState([]);

  const searchPlaces = ({ searchInput }) => {
    console.log(searchInput);
    fetch(
      `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${searchInput}&types=cities&key=${API_KEYS.GOOGLE_MAPS_API_KEY}`
    )
      .then(res => res.json())
      .then(json => {
        console.log(json);
      });
  };

  return (
    <Modal animationType="fade" transparent={false} visible={modalVisible}>
      <TouchableOpacity
        style={styles.iconContainer}
        onPress={() => setModalVisible(false)}
      >
        <Icon name="x" size={30} />
      </TouchableOpacity>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder="Search places…"
          placeholderTextColor="#666"
          value={searchInput}
          onChangeText={newValue => setSearchInput(newValue)}
          onEndEditing={searchInput => searchPlaces(searchInput)}
        />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: "100%",
    justifyContent: "center",
    marginHorizontal: 20
  },
  input: {
    fontFamily: "hermitRegular",
    fontSize: 24
  },
  iconContainer: {
    zIndex: 10,
    position: "absolute",
    top: 60,
    right: 25
  }
});

export default SearchScreen;

以下是回复。第一行是searchInput的内容，第二行是Google API的响应。

undefined
Object {
  "predictions": Array [],
  "status": "INVALID_REQUEST",
}

Answer 1

我弄清楚出了什么问题。

这需要更新：

const searchPlaces = ({ searchInput }) => {
    console.log(searchInput);
    fetch(
      `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${searchInput}&types=cities&key=${API_KEYS.GOOGLE_MAPS_API_KEY}`
    )
      .then(res => res.json())
      .then(json => {
        console.log(json);
      });
  };

对此：

  const searchPlaces = () => {
  console.log(searchInput);
    fetch(
      `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${searchInput}&types=(cities)&key=${API_KEYS.GOOGLE_MAPS_API_KEY}`
    )
      .then(res => res.json())
      .then(json => {
        console.log(json);
      });
  };

我正在尝试使用用户输入来运行搜索，但是我的searchInput变量显示为未定义？

1 个答案: