React Hook：访问外部函数内部的状态

Question

在React应用程序中，我想让一个函数启动一系列异步调用，然后能够在这些调用运行时更改可用于这些调用的状态。例如，我将允许用户启动对5个数据文件的检索，这些数据文件可以在后台运行并耗时数分钟，但可以选择中止该过程或减少文件总数。

这里是它的外观的想法，但不幸的是，这种模式似乎不起作用：

function App() {
  const [halt, setHalt] = useState(false);

  return (
      ...
      <button onClick={() => longProcess(halt)}>Start</button>
      <button onClick={() => setHalt(true)}>Stop</button>
      ...
  );
}

async function longProcess(halt) {
  for (const fileid of files_to_get) {
    // For example, halt if the user clicks the Stop button during execution
    if (halt) break;
    await getDataFile(fileid);
  }
}

理想情况下，我想使用纯功能组件，并允许异步功能供多个组件使用。所以我一直在使用React Hooks。我已经提出了3个解决方案，但没有一个完全符合要求：

• 使用类组件，this.state将异步更新
  • Example
  • 缺点：不是功能组件，异步功能已绑定到该组件
• [useRef()是a suggested option
  • Example
  • 缺点：我们不再获得重新渲染，这是常见的useRef模式吗？
• 从useState传递setter，在调用它时传递一个函数，该函数将检索当前值
  • Example
  • 缺点：似乎很hacky：）

我想知道是否有类似于第三个示例的简洁方法，我只是在有限的React经验中没有遇到过。也欢迎其他建议！

Answer 1

现在，一旦调用halt函数，便无法更新longProcess状态。因此，您可以使用某些global对象来更新状态，但这不是最佳实践。

因此，可以看一下React的useCallback和其他钩子，还可以将循环更改为递归地调用这些钩子之一，这样也许可以帮助更新状态。希望这会有所帮助，即使我现在还不知道解决方案。