如何使用React钩子处理/链接依赖于另一个的同步副作用

挂钩不会取代您处理异步操作的方式，它们只是您曾经做过的某些事情的抽象，例如调用

componentDidMount

state

在您给出的示例中，您实际上并不需要自定义钩子：

function App() {  const [data, setData] = useState(null);  useEffect(() => {    const fetchData = async () => {      const job = await import("./job.json");      const collegues = await import("./collegues.json");      const person = await import("./person.json");      setData({        job,        collegues,        person      })    };    fetchData()  }, []);  return <div className="App">{JSON.stringify(data)}</div>;}

话虽这么说，也许如果您提供了一个实际的redux-saga或thunks代码示例，并且希望进行重构，那么我们可以看到实现此目标的步骤。

编辑：

话虽如此，如果您仍然想做这样的事情，那么可以看一下：

https://github.com/dai-shi/react-hooks-async

import React from 'react';import { useFetch } from 'react-hooks-async/dist/use-async-task-fetch';const UserInfo = ({ id }) => {  const url = `https://reqres.in/api/users/${id}?delay=1`;  const { pending, error, result, abort } = useFetch(url);  if (pending) return <div>Loading...<button onClick={abort}>Abort</button></div>;  if (error) return <div>Error:{error.name}{' '}{error.message}</div>;  if (!result) return <div>No result</div>;  return <div>First Name:{result.data.first_name}</div>;};const App = () => (  <div>    <UserInfo id={'1'} />    <UserInfo id={'2'} />  </div>);

编辑

这是一种有趣的方法https://swr.now.sh/#dependent-
fetching