从网络获取数据时如何隐藏和显示进度条?

Question

我在ReactNative应用程序中使用带有Hooks的ContextAPI。

这是我从 api 获取博客数组的代码

const getBlogPosts = dispatch => {
return async () => {
try {
const response = await jsonServer.get("/blogposts");
dispatch({ type: "get_blogposts", payload: response.data });
} catch (err) {
dispatch({
type: "get_blogposts",
payload: "Something went wrong"
});
}
};
};
const blogReducer = (state, action) => {
switch (action.type) {
case "get_blogposts":
return action.payload;
.....

在这里，我的组件文件我正在做如下的事情

const IndexScreen = ({ navigation }) => {
const { state, getBlogPosts } = useContext(Context);
useEffect(() => {
getBlogPosts();
}, []);
return (
<View>
<FlatList..../>
{state.length === 0 ? <ProgressBar /> : null}

假设没有博客，那么即使在网络操作完成后，进度条也会继续显示，所以我无法编写上面的代码来显示和显示进度条 现在我尝试在用户调用时触发多个调度getBlogPosts但这会将状态值从布尔值更改为数组，然后再更改为布尔值。

有没有一种简单的方法来处理进度条的可见性？

Answer 1

您可以在调度中设置一个新类型，如get_blogposts_in_progress，并在化简器中设置true/false，如state.loading = true如果调度get_blogposts_in_progress，并在 api 调用成功或错误时state.loading = false调度。

const getBlogPosts = dispatch => {
return async () => {
dispatch({ type: "get_blogposts_in_progress" });
try {
const response = await jsonServer.get("/blogposts");
dispatch({ type: "get_blogposts", payload: response.data });
} catch (err) {
dispatch({
type: "get_blogposts",
payload: "Something went wrong"
});
}
};
};
const blogReducer = (state, action) => {
switch (action.type) {
case "get_blogposts_in_progress":
return { ...state, ...{ loading: true } };
case "get_blogposts":
return { ...action.payload, ...{ loading: false } };
.....

和组件文件。

const IndexScreen = ({ navigation }) => {
const { state, getBlogPosts } = useContext(Context);
useEffect(() => {
getBlogPosts();
}, []);
return (
<View>
<FlatList..../>
{state.loading ? <ProgressBar /> : null}

Answer 2

由于您的博客数组可以为空，因此您的博客数组在加载后可能相同。您必须存储一个布尔值，指示加载在您的状态下完成。

获取数据后，只需将此值设置为false：

const IndexScreen = ({ navigation }) => {
const { state, getBlogPosts } = useContext(Context);
const [loading, setLoading] = useState(true);
useEffect(async () => {
await getBlogPosts();
setLoading(false)
}, []);
return (
<View>
<FlatList..../>
{loading && <ProgressBar />}

您还必须使您的效果async才能使用await.

我还使用内联if(&&(来渲染加载组件。