React native I';我试图使用用户输入运行搜索,但我的searchInput变量显示为未定义?

React native I';我试图使用用户输入运行搜索,但我的searchInput变量显示为未定义?,react-native,React Native,我试图使用用户输入运行搜索,但在运行代码时,我的searchInput变量显示为未定义。我不知道我做错了什么。谢谢你的帮助 这是我的代码: import React, { useState } from "react"; import { TouchableOpacity, StyleSheet, View, Modal, TextInput } from "react-native"; import Icon from "react-native-vector-icons/

我试图使用用户输入运行搜索,但在运行代码时,我的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;

我发现了问题所在

这需要更新:

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