React Native搜索功能searchInput undefined问题求助

我帮你找到了两个核心问题，正是它们导致了searchInput显示undefined以及API返回INVALID_REQUEST的情况：

1. onEndEditing的参数传递错误 #

React Native的TextInput组件中，onEndEditing回调接收的是事件对象，而非输入框的当前文本值。你现在把这个事件对象传给searchPlaces，然后在函数里尝试解构{searchInput}，自然拿不到正确的输入值，所以控制台输出undefined。

2. searchPlaces函数冗余的参数定义 #

你已经在组件内部通过useState声明了searchInput状态变量，完全不需要再通过函数参数传递这个值，直接在函数内使用即可。

另外补充一个关键细节：如果用户输入的内容包含空格、特殊字符（比如中文），直接拼到URL里会导致请求格式无效，这也是INVALID_REQUEST的潜在诱因，所以需要用encodeURIComponent()对searchInput进行URL编码。

修正后的完整代码 #

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([]);

  // 去掉冗余参数，直接使用组件内的searchInput状态
  const searchPlaces = () => {
    console.log(searchInput);
    // 对输入值进行URL编码，避免特殊字符导致请求无效
    const encodedInput = encodeURIComponent(searchInput);
    fetch(
      `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${encodedInput}&types=cities&key=${API_KEYS.GOOGLE_MAPS_API_KEY}`
    )
      .then(res => res.json())
      .then(json => {
        console.log(json);
        setSearchResults(json.predictions || []); // 同步更新搜索结果状态
      })
      .catch(err => console.error("请求出错:", err)); // 增加错误捕获，方便排查异常
  };

  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)}
          // 无需传参，直接调用searchPlaces
          onEndEditing={searchPlaces}
          // 可选：增加onSubmitEditing，用户按回车时也触发搜索
          onSubmitEditing={searchPlaces}
        />
      </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;

额外建议 #

• 增加catch块捕获请求异常，方便排查网络或API密钥相关的问题；
• 给TextInput加上onSubmitEditing属性，让用户点击键盘提交按钮时也能触发搜索，提升交互体验；
• 确认你的Google Maps API密钥已经启用了Places API，并且没有设置错误的权限限制，这也是INVALID_REQUEST或无结果的常见原因。

内容的提问来源于stack exchange，提问作者Devin Jameson