Question

这是一个大大简化的 React Hook 解决方案版本，我一直坚持使用...

export const useStepA = () => {
  const [stepA, setStepA] = useState();
  const getStepA = useCallback(async (stepAParam: string) => {
    setStepA({ stepBId: '1' });
  }, []);
  return { getStepA, stepA };
};
export const useStepB = () => {
  const [stepB, setStepB] = useState();
  const getStepB = useCallback(async (stepBParam: string) => {
    setStepB(stepBParam);
  }, []);
  return { getStepB, stepB };
};
export const useStepC = () => {
  const { getStepA, stepA } = useStepA();
  const { getStepB, stepB } = useStepB();
  const [stepC, setStepC] = useState();
  const getStepC = useCallback(
    async (stepAParam: string) => {
      /* ????? await? useEffect? magic?
      getStepA(stepAParam);
      getStepB(stepA.stepBId);
      */
      setStepC({stepA,stebB});
    },
    [getStepA, getStepB, stepA]
  );
  return { getStepC, stepC };
};

在现实世界中...... StepB 依赖于 StepA 的数据，两者都是 fetch 调用...... StepC 获取 StepA 和 StepB 的内容并返回它们的合并......

如何编写 stepC 钩子来处理和等待，然后处理和等待，然后处理和返回？

Answer 1

虽然我不认为这是一个非常可组合的模式，但如果您小心地为 stepA 和 { 设置初始值，则可以通过一些努力使它们工作{1}} 假：

stepB

当短时间内多次调用export const useStepC = () => { const { getStepA, stepA } = useStepA(); const { getStepB, stepB } = useStepB(); const [stepC, setStepC] = useState(); const getStepC = useCallback((stepAParam: string) => { getStepA(stepAParam); }, [getStepA]); useEffect(() => { if (stepA) { getStepB(stepA.stepBId); } }, [stepA, getStepB]); useEffect(() => { if (stepA && stepB) { setStepC({stepA,stebB}); } }, [stepA, stepB, setStepC]) return { getStepC, stepC }; };导致有两个并发promisepending时，最有可能出现问题，并且由于getStepC()和useStepA()的实现方式，有无法解决这些固有的竞争条件。

Answer 2

有一个 useSWR hook 可以解决这些问题。 check this

我如何嵌套异步 React 钩子

2 个答案: