在axios从api获取数据时实现ActivityIndicator

Question

当axios从api获取数据时，我正在尝试实现ActivtyIndicator。

我已经设置了上下文，如下所示。

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> );
};

然而，指标并没有如预期的那样出现。我想我不应该在useEffect钩子内将setLoader状态设置为false，不确定如何设置为false。如果有更好的方法来实现这一点，请欣赏您的想法。

Answer 1

问题出在您的useEffect函数中。您正在调用一个操作(jobFeed(，该操作调用内部的异步函数。您应该等待异步调用结果，并相应地显示加载状态。

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

为了使其正常工作，您可以将异步调用移动到组件中，也可以将加载状态移动到reducer中。

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;
}
};

我不明白您是如何创建上下文的，但我们的想法是从reducer中获取有效负载和加载状态，并将其显示在组件中。希望这能有所帮助。