我正在尝试将我的应用程序从redux重写为新的context + hook，但是不幸的是，我很难找到一种好的方法来处理一系列依赖于先前响应的同步副作用。

在当前的redux应用程序中，我大量使用通常通过redux-
saga或thunk处理的同步/链接操作和API请求。因此，当返回第一个API请求的响应时，该数据将用于下一个API请求等。

我已经制作了一个自定义钩子“
useFetch”（在此示例中，它并没有太大作用，因为它是简化版本，所以我还必须对其进行一些小的调整才能在codeandbox上使用-
请参见下面的代码）。问题在于由于“钩子规则”，我无法在useEffect钩子内使用自定义钩子。那么，如果您有自己的钩子来获取数据，那么在执行下一个等之前如何等待第一个请求的响应呢？即使我最终放弃了useFetch抽象并创建了一个香草提取请求，如何避免以许多useEffects钩子s肿而告终？是否可以更优雅地完成此操作，还是上下文+挂钩还为时过早，无法与redux
saga / thunk竞争来处理副作用？

下面的示例代码非常简单。它应该尝试模拟的是：

1. 查询人员api端点以获取人员
2. 收到人员回复后，查询工作终结点（使用真实场景中的人员ID）
3. 一旦有了人员和职位，就可以根据人员和职位端点的响应，查询同事端点，以查找特定职位的人员同事。

这是代码。为useFetch挂钩添加了延迟，以模拟现实世界中的延迟：

import React, { useEffect, useState } from "react";
import { render } from "react-dom";

import "./styles.css";

const useFetch = (url, delay = 0) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // const result = await fetch(url, {
      //  method: "GET",
      //  headers: { "Content-Type": "application/json" }
      // });
      //const response = await result.json();
      const response = await import(url);
      setTimeout(function() {
        setData(response);
      }, delay);
    };

    fetchData();
  }, [url]);

  return data;
};

function App() {
  const [person, setPerson] = useState();
  const [job, setJob] = useState();
  const [collegues, setCollegues] = useState();

  // first we fetch the person /api/person based on the jwt most likely
  const personData = useFetch("./person.json", 5000);
  // now that we have the person data, we use the id to query for the
  // persons job /api/person/1/jobs
  const jobData = useFetch("./job.json", 3000);
  // now we can query for a persons collegues at job x /api/person/1/job/1/collegues
  const colleguesData = useFetch("./collegues.json", 1000);

  console.log(personData);
  console.log(jobData);
  console.log(colleguesData);

  // useEffect(() => {
  //   setPerson(useFetch("./person.json", 5000));
  // }, []);

  // useEffect(() => {
  //   setJob(useFetch("./job.json", 3000));
  // }, [person]);

  // useEffect(() => {
  //   setCollegues(useFetch("./collegues.json",1000));
  // }, [job]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

正在运行的示例：https :
//codesandbox.io/s/2v44lron3n?fontsize=14（您可能需要进行更改-
空格或删除分号-使其起作用）

希望这样的事情（或更好的解决方案）是可能的，否则我将无法从令人敬畏的redux-saga / thunks迁移到context + hooks。

最佳答案： https ：
//www.youtube.com/watch？v =
y55rLsSNUiM