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

Question

我在我的ReactNative 应用程序中使用Context Api 和Hooks。

这是我从 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，你可以在调度中有一个新类型get_blogposts_in_progress，并在reducer中设置true/false，比如state.loading = true，当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 (&&) 来渲染加载组件。