在变量 for 循环中运行反应钩子

Question

这是用例。我们单独的 AJAX 调用在一个钩子后面（我们使用 apollo 钩子）。但是，有时我们需要进行可变数量的调用（可变 for 循环）。初始 AJAX 调用决定了对另一个端点进行多少变量调用。不幸的是，这段代码没有运行（React 运行时错误）：

https://jsfiddle.net/dm3b2Lgh/

我看过这个其他问题，但给定的方法不起作用：Why can't React Hooks be called inside loops or nested function?

有没有办法让它工作？

function useInitialAjaxCall() {
    const [result, setResult] = React.useState(0);
  React.useEffect(() => {
    const resultSize = Math.floor((Math.random() * 100) + 1);
    Promise.resolve().then(() => setResult(
            resultSize
    ))
  }, [])
  return result;
}

function useMockAjaxCall(i) {
    const [result, setResult] = React.useState();
  React.useEffect(() => {
    Promise.resolve().then(() => setResult(i));
  }, [i])
  return result;
}

function useMakeNCalls(n) {
   return [...Array(n)].map((_, i) => useMockAjaxCall(i));
}

function useCombineAjaxCalls(n) {
    const resultArray = useMakeNCalls(n);
    const resultCombined = React.useMemo(() => {
    return resultArray.reduce((total, cur) => total + cur, 0);
  }, [resultArray])
  return resultCombined;
}

function Hello(props) {
  const initial = useInitialAjaxCall();
  const count = useCombineAjaxCalls(
        initial
  );
  return (
  <div>
  <div>{initial}</div>
  <div>{count}</div>
  </div>
  );
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 1

original question 询问一个固定的 for 循环：

如果我们在迭代次数不随时间变化的循环中调用 useState

但是，在您的代码中，useInitialAjaxCall() 将在第一次渲染期间返回 undefined（因为 useEffect 是异步的 - 它将在第一次渲染后执行）。

然后，useCombineAjaxCalls(undefined) 将调用useMakeNCalls(undefined)，后者将调用useMockAjaxCall(0)，只调用一次useState。

在第一次渲染结束时，initial 将是 undefined 而count 将是 NaN。

假设 resultSize 与 1 不同，在下一次渲染中，您的代码将尝试调用 useState 的次数与 1 不同，如原问题所述，这是不可能的。

不可能“在变量 for 循环中运行反应钩子” - 但您可以创建 1 个状态，即一个数组。