有没有办法错开 React 钩子?

Question

我试图避免在 React Hooks 中使用条件语句，但我已经到了可能需要一些高级技术的地步。我这里有 3 个相互依赖的钩子。每个钩子返回下一个钩子需要执行的元组[bool, object]。

在内部，每个钩子都是一个异步操作，我无权修改它们。

const [loadingA, resultA] = useHook1(); 
const [loadingB, resultB] = useHook2(resultA.prop1); // Error!
const [loadingC, resultC] = useHook3(resultB.prop2); // Error!
if (loadingA || loadingB || loadingC) {
return <span>loading...</span>;
}

// All results are required for this component.
return <MyComponent x={resultA.x} y={resultB.y} z={resultC.z} />; 

上述中断是因为useHook2和useHook3需要定义参数。不幸的是，我不能使用这样的条件：

// this is not allowed
if (!loadingA) {
const [loadingB, resultB] = useHook2(resultA.prop1);
}

有没有人有任何关于如何错开钩子以便它们根据以前的异步钩子的结果执行的提示？

Answer 1

如果参数未定义，则在hook2和hook3中返回一些默认值。如果你不能直接修改hook2或hook3，你可以随时将它们包装在另一个钩子(useHook2Wrapper、useHook3Wrapper(中，并进行未定义的值验证。

const [loadingA, resultA] = useHook1(); 
const [loadingB, resultB] = useHook2(resultA && resultA.prop1);
const [loadingC, resultC] = useHook3(resultB && resultB.prop2);

const useHook2 = (someProp) => {
if (!someProp) {
return [false, undefined];
}
// rest of the hook logic
}