在相同的 useEffect 中依赖地使用相同的数据

Question

我需要以两种不同的方式获取我的数据并根据此进行渲染。在第一次加载时，我需要一个一个地获取所有项目并增加计数。之后，我需要一次获取所有数据并更新显示。所以，我写了这样的东西（不是实际的代码，而是几乎一样的东西）：

import React, { useEffect } from "react";

import axios from "axios";

import { useGlobalState } from "./state";

const arr = Array.from(Array(100), (x, i) => i + 1);

function App() {

  const [{ posts }, dispatch] = useGlobalState();

  useEffect(() => {

    const getInc = () => {

      arr.forEach(async id => {

        const res = await axios(

          `https://jsonplaceholder.typicode.com/posts/${id}`

        );

        dispatch({

          type: "INC",

          payload: res.data

        });

      });

    };

    const getAll = async () => {

      const promises = arr.map(id =>

        axios(`https://jsonplaceholder.typicode.com/posts/${id}`)

      );

      const res = await Promise.all(promises);

      dispatch({

        type: "ALL",

        payload: res.map(el => el.data)

      });

    };

    if (!posts.length) {

      getInc();

    } else {

      getAll();

    }

  }, [dispatch]);

  return (

    <>

      <div>{posts.length}</div>

    </>

  );

}

export default App;

我只是在使用Context和useReducer创建一个简单的商店。上面的代码按原样工作，但我跳过添加posts.length依赖项，这让我认为我的逻辑是错误的。

我尝试使用 refs 来跟踪初始化状态，但我需要在每次路由更改时跟踪数据。然后，我试图通过向init我的商店添加一个状态来保持它，但我无法让它毫无问题地工作。例如，我找不到合适的地方发送init. 如果我在一次获取后尝试它，它会立即触发初始化并getAll调用我的另一个函数 ( )。

如果有人想玩它，这里有一个工作沙箱：https : //codesandbox.io/s/great-monad-402lb