时间戳

首页 > 解决方案 > UI渲染后如何在选择器列表中添加项目

javascript - UI渲染后如何在选择器列表中添加项目

问题描述

我想要做的是我想添加省份列表，即我从 API 调用（THIS）接收到的国家。但显然从 API 调用和接收数据需要时间。现在我如何将此列表放入选择器项目中。

我的代码：

import React, {useState} from 'react';

import {
    KeyboardAvoidingView,
    Picker,
    ScrollView,
    StyleSheet,
    View,
} from 'react-native';

import GLOBAL_STYLES from "../constants/GLOBAL_STYLES";

const RegisterScreen = props => {
    let [stateSelectedValue, setStateSelectedValue] = useState("Select State");
    let [citySelectedValue, setCitySelectedValue] = useState("Select City");
    let provinces = [], cities = []

    async function gettingStatesAsync() {
        let response = await fetch('https://www.btsp.ml/api/citizen/states')
        provinces = await response.json().data.states

        console.log(provinces)
    }

    const StatesAsync = gettingStatesAsync();

    async function gettingCities() {
        let response = await fetch('https://www.btsp.ml/api/citizen/states/' + 1 + '/cities')
        cities = await response.json().data.cities

        console.log(cities)
    }

    let provincesList = () => {
        return (provinces.map((x, i) => {
            return (<Picker.Item label={x} key={i} value={x}/>)
        }));
    }

    return (
        <View style={GLOBAL_STYLES.authScreen}>
            <ScrollView keyboardShouldPersistTaps="handled">
                
                <KeyboardAvoidingView enabled>
                    <View style={{flexDirection: 'row', marginStart: 10, marginEnd: 10}}>
                        <View style={{flex: 1}}>
                            <Picker
                                selectedValue={stateSelectedValue}
                                style={{height: 30, justifyContent: 'flex-start', color: '#fff'}}
                                onValueChange={(itemValue, itemIndex) => setStateSelectedValue(itemValue)}
                                mode={"dropdown"}
                            >
                                <Picker.Item label="Select State" value=""/>
                                {provincesList()}
                            </Picker>
                        </View>

                        <View style={{flex: 1}}>
                            <Picker
                                selectedValue={citySelectedValue}
                                style={{height: 30, justifyContent: 'flex-end', color: '#fff'}}
                                onValueChange={(itemValue, itemIndex) => setCitySelectedValue(itemValue)}
                            >
                                <Picker.Item label="Select City" value=""/>
                                <Picker.Item label="Islamabad" value="isb"/>
                                <Picker.Item label="Hasilpur" value="hsp"/>
                                <Picker.Item label="Rawalpindi" value="pindi"/>
                            </Picker>
                        </View>
                    </View>

                </KeyboardAvoidingView>
            </ScrollView>
        </View>
    );
};

export default RegisterScreen;

const styles = StyleSheet.create({
    successTextStyle: {
        color: '#fff',
        textAlign: 'center',
        fontSize: 18,
        padding: 30,
    },
});

它正在从 API 接收数据，但是如何在渲染 UI 后将这些添加到选择器项，因为它会导致问题？我究竟做错了什么？如果我在 中添加省份provinces object，它会添加到 Picker Item 但不是通过 API 调用。

谢谢

标签： javascriptreact-nativereact-hookspicker

解决方案

您应该将省份维持在如下状态

const [provinces,setProvinces] = useState([]);

    async function gettingStatesAsync() {
        let response = await fetch('https://www.btsp.ml/api/citizen/states')
        const data = await response.json().data.states
        setProvinces(data);
    }

然后，当使用 API 中的数据更新省份数组时，它将重新呈现。

推荐阅读