如何在React Native中从API动态创建时区选择数据对象？

你只需要修改API响应的转换逻辑，把返回的时区数据直接映射成下拉菜单需要的格式即可，具体实现如下：

1. 调整数据转换逻辑 #

在getTimeZone函数中，将原来仅提取countryCode的map逻辑，替换为生成包含label和value的对象：

• label拼接countryName与zoneName，完全匹配你需要的示例格式
• value使用map的索引参数，保证每个条目值唯一

2. 优化代码风格（可选） #

避免async/await与.then/.catch混用，改用try/catch写法，代码逻辑更清晰。

修改后的完整代码 #

import { Text, StyleSheet, View, TextInput, Pressable } from 'react-native';
import { useState, useEffect } from 'react';
import axios from 'axios';
import { ScrollView } from 'react-native';
import TimeZoneDropDown from '../dropdowns/TimeZoneDropDown';

// 替换为你的TimeZoneDB实际密钥
const tzUrl = 'http://api.timezonedb.com/v2.1/list-time-zone?key=YOUR_ACTUAL_KEY&format=json';

const TimeZone = () => {
    const [timeZones, setTimeZones] = useState([]);
    const [dayOfWeek, setDayOfWeek] = useState('');

    const getTimeZone = async () => {
        try {
            const res = await axios.get(tzUrl);
            // 转换API数据为下拉菜单所需格式
            const formattedData = res.data.zones.map((zone, index) => ({
                label: `${zone.countryName} ${zone.zoneName}`,
                value: index
            }));
            setTimeZones(formattedData);
        } catch (err) {
            console.error('获取时区数据失败:', err);
        }
    };

    useEffect(() => {
        getTimeZone();
    }, []);

    return (
        <View style={styles.container}>
            {/* 渲染下拉菜单组件，传入转换好的数据 */}
            <TimeZoneDropDown data={timeZones} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 16,
    },
});

export default TimeZone;

关键说明 #

• 转换后的timeZones数组完全符合你给出的示例格式，可直接传给下拉菜单组件
• 如果你的下拉菜单组件需要value为其他类型（比如时区名称本身），只需把value: index改成value: zone.zoneName即可
• 务必把URL中的YOUR_ACTUAL_KEY替换成你在TimeZoneDB申请的真实密钥

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