Picker组件持续显示加载状态无数据展示，如何修复？

问题现象 #

Picker组件一直停留在加载状态，无法渲染后端返回的选项数据，截图如下：

代码问题分析与修复 #

1. React Native组件逻辑错误 #

核心问题点：

• 加载状态判断完全颠倒：原代码中hasLoaded为true时显示加载动画，与实际需求相反
• getData未返回Promise，导致await无效，数据还未获取就标记为已加载
• Picker的selectedValue绑定错误：直接绑定数组data，应绑定单个选中项的状态
• map函数未返回渲染元素，导致选项无法生成
• 模板字符串使用错误：用单引号包裹模板字符串，变量无法解析

修复后的组件代码：

const Sub_Map = () => { 
    const [hasLoaded, setHasLoaded] = useState(false);
    const [data, setData] = useState([]);
    // 单独维护Picker选中项的状态
    const [selectedItem, setSelectedItem] = useState(null);

    useEffect(() => {
        const callApi = async () => {
            await getData();
            setHasLoaded(true);
        };
        callApi();
    }, []);

    // 让getData返回Promise，确保await能等待请求完成
    const getData = () => {
        return fetch('http:// . . . ./aplikasi/restapi.php?op=getJenis')
            .then(response => response.json())
            .then(json => {
                console.log(json); // 打印日志确认数据结构是否正确
                setData(json || []); // 处理后端返回null的情况
            })
            .catch(error => {
                console.error('接口请求失败:', error);
                setData([]);
            });
    };

修复后的返回渲染代码：

return (
    <View style={styles.container}>
        <Text style={styles.text}>Pilih Data</Text>
        <View style={styles.picker}>
            {/* 修正加载状态判断：未加载时显示加载动画 */}
            {!hasLoaded ? (
                <ActivityIndicator />
            ) : (
                <Picker
                    selectedValue={selectedItem} // 绑定选中项状态
                    onValueChange={itemValue => setSelectedItem(itemValue)}>
                    {/* map函数返回Picker.Item，使用正确的反引号模板字符串 */}
                    {data.map((item, key) => (
                        <Picker.Item
                            label={`${item.bencana}`}
                            value={`${item.ID}`}
                            key={key}
                        />
                    ))}
                </Picker>
            )}
        </View>
    </View>
);
};

2. 后端API潜在问题 #

核心问题点：

• 未初始化$hasil数组，若数据库查询无数据，json_encode($hasil)会返回null，前端无法解析为数组
• 未设置正确的JSON响应头，可能导致前端解析失败

修复后的后端API代码：

function getJenis()
{
    global $conn;
    // 初始化数组，避免查询为空时返回null
    $hasil = [];

    $sql = mysqli_query($conn, "SELECT * FROM bencana_detail ORDER BY bencana ASC");

    while ($row = mysqli_fetch_array($sql)) {
        $hasil[] = array(
            'ID' => $row['id_bencana_detail'],
            'bencana' => $row['bencana']
        );
    }
    // 设置正确的JSON响应头
    header('Content-Type: application/json');
    echo json_encode($hasil);
}

验证步骤 #

1. 打开React Native调试工具，查看getData中的console.log(json)输出，确认后端返回的数据结构是否为数组
2. 检查网络请求是否成功，是否存在跨域或接口地址错误
3. 确认数据库中bencana_detail表有数据

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