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

如果参数为 undefined ，请在 hook2 和 hook3 中返回一些默认值。如果您不能直接修改 hook2 或 hook3 ，则始终可以将它们包装在另一个钩子中（useHook2Wrapper，useHook3Wrapper）并执行 undefined 值验证。

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
}

有没有办法错开React Hooks？

1 个答案: