解决React Native中HERE API自动补全请求无响应问题及调试技巧

// ...
const onChangeText = async (text: string) => {
    setInput(text)
    if (text.length === 0) return setData([]);
    if (text.length > 2) {
        let endpoint = `http://192.168.0.105:4000/api/search?location=${text}&limit=${5}`
        const res = await fetch(endpoint);
        if (res) { // 问题所在：res即使是错误响应也为真
            const data: Location[] = await res.json(); // 可能在此处失败
            if (data.length > 0) setData(data);
        }
    }
    console.log("get data")
}
// ...

import React, { useState } from 'react';
import { Text, View, SafeAreaView, StyleSheet, TouchableWithoutFeedback, Pressable, Keyboard, FlatList, TextInput, Alert } from "react-native"; // 导入Alert用于错误提示
import { Location } from "../types/location";
import { MaterialIcons } from "@expo/vector-icons"

export default function TabTwoScreen() { // 更正了TabTwoScreeen的拼写
    const [input, setInput] = useState<string>(''); // 初始化为空字符串
    const [data, setData] = useState<Location[]>([]); // 初始化为空数组
    const [loading, setLoading] = useState<boolean>(false); // 添加加载状态

    const onChangeText = async (text: string) => {
        setInput(text);
        if (text.length === 0) {
            setData([]);
            return;
        }
        if (text.length > 2) {
            setLoading(true); // 开始加载
            try {
                // 确保后端服务地址正确，且您的设备可以访问此IP地址
                // 在模拟器或真机上，'localhost'或'127.0.0.1'通常指设备本身，而不是开发机器
                // 确保使用开发机器的局域网IP地址，或者部署到可公开访问的服务器
                let endpoint = `http://192.168.0.105:4000/api/search?location=${text}&limit=${5}`;
                const res = await fetch(endpoint);

                // 检查HTTP状态码是否在200-299范围内
                if (!res.ok) {
                    const errorText = await res.text(); // 尝试读取非JSON错误信息
                    console.error(`HTTP error! status: ${res.status}, body: ${errorText}`);
                    Alert.alert("请求失败", `API请求出错，状态码: ${res.status}`);
                    setData([]); // 清空数据
                    return;
                }

                const responseData: { results: Location[] } = await res.json(); // 假设返回的数据结构是 { results: Location[] }
                // 根据HERE API的实际返回结构调整这里的数据提取
                // 原始代码中 `if (data)` 检查的是 `data` 数组本身，如果API返回的是 { suggestions: [...] } 这样的结构，需要相应调整
                // 假设HERE API返回的结构是 { suggestions: Location[] }
                if (responseData && responseData.suggestions && responseData.suggestions.length > 0) {
                    setData(responseData.suggestions);
                } else {
                    setData([]);
                }

            } catch (error) {
                console.error("Fetch operation failed:", error);
                Alert.alert("网络错误", "无法连接到服务器或解析数据失败。");
                setData([]);
            } finally {
                setLoading(false); // 结束加载
            }
        } else {
            setData([]); // 少于3个字符时清空数据
        }
        console.log("get data triggered for:", text);
    };

    const getItemText = (item: Location) => {
        let mainText = item.title;
        return (
            <View style={{ flexDirection: "row", alignItems: "center", padding: 15 }} >
                <MaterialIcons
                    name={item.administrativeAreaType === "city" ? "location-city" : "location-on"}
                    color={"black"}
                    size={30}
                />
                <View style={{ marginLeft: 10, flexShrink: 1 }}>
                    <Text style={{ fontWeight: "700" }}>{mainText}</Text>
                    <Text style={{ fontSize: 12 }}>{item.address.countryName}</Text>
                </View >
            </View >
        )
    };

    return (
        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
            <SafeAreaView style={{ flex: 1 }}>
                <View style={styles.container}>
                    <Text style={styles.label}>Search Location</Text>
                    <TextInput
                        placeholder="Find location"
                        value={input}
                        onChangeText={onChangeText}
                        style={styles.input}
                    />
                    {loading && <Text style={{ textAlign: 'center', padding: 10 }}>加载中...</Text>}
                    <FlatList
                        data={data}
                        keyExtractor={(item) => item.id} // 添加keyExtractor
                        renderItem={({ item }) => (
                            <Pressable onPress={() => Alert.alert("选中地点", JSON.stringify(item))}
                            >
                                {getItemText(item)} {/* 渲染实际的地点信息 */}
                            </Pressable>
                        )}
                        ListEmptyComponent={!loading && input.length > 2 && data.length === 0 ? <Text style={{ textAlign: 'center', padding: 10 }}>没有找到结果</Text> : null}
                    />
                </View>
            </SafeAreaView>
        </TouchableWithoutFeedback>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 50,
        marginLeft: 12,
        marginRight: 12,
    },
    label: {
        marginBottom: 5,
        fontSize: 12,
    },
    input: {
        height: 40,
        borderWidth: 1,
        paddingHorizontal: 10,
        borderRadius: 5,
    },
});