I'm using 2 usestate in my component

const [choosedH, setChoosedH] = useState([]);
const [h, setH] = useState([]);

I have async method which fetch data from api and convert it to final array.

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

async function getH(){
    const username = await SecureStore.getItemAsync('username')
    const token = await SecureStore.getItemAsync('token')
    
    axiosInstance.get('/api/xxx/'   username,
    {
        headers: {
            Cookie: token,
        },
    },
        { withCredentials: true }
    )
        .then((response) => {
            if(response.data.length > 0){
                let singleH = {};
                response.data.forEach(element => {
                    singleH = {
                         label: element.name,
                         value: element.name
                    }
                     h.push(singleH);
                });
                console.log(h)
            }
        })
        .catch(function (error) {
            console.log('There has been a problem with your fetch operation: '   error.message);
            throw error;
        })
    }

and finally i have my component:

            <RNPickerSelect
                onValueChange={(value) => setChoosedH(value)}
                items={h}
                useNativeAndroidPickerStyle={false}
                style={{
                    ...pickerSelectStyles,
                    iconContainer: {
                    top: 10,
                    right: 10,
                    },
                }}
                placeholder={{
                    label: 'Select',
                    value: null,
                }}
                Icon={() => {
                    return <Icon name="arrow-down" size={24} />;
                }}
                value={choosedH}
            />

I have a problem. After render my picker contain empty array. When render end, hook useEffect call getH() which give me data from api and convert it as I want to value of useState "h". How to force update picker items when function getH will end? It it possible to get data from api before render? Any ideas ?

CodePudding user response：

I guess the problem is that you try to access h directly instead of using setH.

This should work:

    if(response.data.length > 0){
                    const myArray = []
                    response.data.forEach(element => {
                        const singleH = {
                             label: element.name,
                             value: element.name
                        }
                         myArray.push(singleH);
                    });
                    setH(myArray)
                    console.log(h)
                }