React native I';我试图使用用户输入运行搜索,但我的searchInput变量显示为未定义?
我试图使用用户输入运行搜索,但在运行代码时,我的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/
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);
});
};