react-native - 我正在尝试使用用户输入运行搜索,但我的 searchInput 变量显示为未定义?
问题描述
我正在尝试使用用户输入运行搜索,但是当我运行代码时,我的 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",
}
解决方案
我发现出了什么问题。
这需要更新:
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);
});
};
推荐阅读
- mysql - 使用 sqoop2 将 MYSQL 数据注入 S3 存储桶
- javascript - 为什么在下面的 JS 代码中,在 setItem 之前使用了 Local Storage 对象的 getItem 方法?
- javascript - 如何从 php 接收这种类型的 javascript 数据?
- django - Django通过对源进行分组来获取外键记录的计数
- laravel - Laravel:在不同的行中使用不同的 where 条件进行查询
- r - 如何检测是否没有引用向量中的所有元素
- javascript - 使用条件语句和 IIAEF 等待/异步
- python - Django:在 ListView 中显示评分计数
- typescript - 如何在 TypeScript 函数的参数中声明新的泛型?
- vue.js - 在使用 NuxtJS 或 NextJS 时,是否可以根据需要在 URL 末尾添加 .html?