Реализация ActivityIndicator в то время как Axios извлекает данные из API

Я пытаюсь реализовать ActivtyIndicator то время как ActivtyIndicator получить данные из API.

Я настроил свой контекст, который выглядит следующим образом.

const reducer = (state, action) => {
    switch(action.type) {
        case 'PULL_JOB_FEED_DATA':
            return action.payload;
        default:
            return state;
    }
};

const jobFeed = (dispatch) => {
    return async () => {
        const response = await serverAccess.get('/jobFeedData');
        dispatch({ type: 'PULL_JOB_FEED_DATA', payload: response.data });
    }
}

export const { Context, Provider } = dataContext(
    reducer,
    { jobFeed },[]
);

и используя контекст внутри home.js, как показано ниже, где я попытался реализовать ActivityIndicator

const JobSearch = ({ navigation }) => {
const [loading, setLoader] = useState(true);

useEffect(() => {
        jobFeed();
        setLoader(false);
    }, []);

    return (<View>
           {loading ? <ActivityIndicator /> : <Text>Content to be displayed otherwise</Text>}
         </View> );

};

Индикатор, однако, не отображается, как ожидалось. Я предполагаю, что не должен устанавливать состояние setLoader в false в хуке useEffect, не уверен, как еще я могу установить значение false. Если есть лучший способ реализовать это, оцените ваши мысли.

Всего 1 ответ


Проблема в вашей функции useEffect. Вы вызываете действие (jobFeed), которое вызывает асинхронную функцию внутри. Вам следует дождаться результата асинхронного вызова и соответственно показать состояние загрузки.

useEffect(() => {
        jobFeed();
        // remove this. setLoader(false);
}, []);

Для правильной работы вы можете либо переместить асинхронный вызов в свой компонент, либо переместить состояние загрузки в свой редуктор.

const jobFeed = (dispatch) => {
    return async () => {
        dispatch({ type: 'START_LOADING_DATA' });

        //you also need to add here a try and catch block.
        const response = await serverAccess.get('/jobFeedData');

        dispatch({ type: 'PULL_JOB_FEED_DATA', payload: response.data });
    }
}

и измените ваш редуктор на что-то вроде следующего

const reducer = (state, action) => {
    switch(action.type) {
        case 'PULL_JOB_FEED_DATA':
            return {...state, payload: action.payload, loading: false};
        case 'START_LOADING_DATA':
            return {...state, loading: true};
        default:
            return state;
    }
};

Я не понял, как вы создали свой контекст, но идея в том, чтобы получить полезную нагрузку и состояние загрузки от вашего редуктора и показать его в компоненте. Надеюсь, что это поможет.


Есть идеи?

10000