javascript - 在同一个 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

Answer 1

我将 init 添加到您的商店:

// @dataReducer.js
export const initialDataState = {
  init: true,
  posts: []
};

const dataReducer = (state, action) => {
  switch (action.type) {
    case 'ALL':
      // init false
      return { ...state, posts: action.payload };
    case 'INC':
      return { ...state, init: false, posts: [...state.posts, action.payload] };
...
}

// @App.js
function App() {
  const [{ init, posts }, dispatch] = useGlobalState();

  useEffect(() => {
    init ? getInc(dispatch) : getAll(dispatch);
  }, [init, dispatch]);
...
}