javascript - react Hook : Access to state inside an external function

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
  • 缺点:不是函数式组件，异步函数与组件绑定(bind)
• useRef() 是 a suggested option
  • > Example
  • 缺点:我们不再重新渲染，这是一种常见的 useRef 模式吗？
• 从 useState 传递 setter，调用它时传递一个函数，该函数将检索当前值
  • > Example
  • 缺点:看起来很老套 :)

我很好奇是否有任何类似于第 3 个示例的简洁方法，我只是在我有限的 React 经验中没有遇到过。也欢迎其他建议!

Answer 1

要有一个可重用的函数，我会在 Hook 中定义它。

以下提案使用useState 来执行函数。我们需要 useState 在值更改时触发渲染。该值将从 useEffect 中调用该函数。

它还使用 useRef 以便进程可以启动并稍后读取它的值，该值可能在执行期间发生变化。

const App = () => {
    const { startProcess, stopProcess } = useLongProcess();

    return (
        <Fragment>
            <button onClick={startProcess}>Start</button>
            <button onClick={stopProcess}>Stop</button>
        </Fragment>
    );
};

const useLongProcess = () => {
    const stop = useRef(false);
    const [start_process, setStartProcess] = useState(false);

    useEffect(() => {
        if (!start_process) {
            return;
        }

        const longProcess = async () => {
            for (const fileid of files_to_get) {
                if (stop.current) break;
                await getDataFile(fileid);
            }
        };

        longProcess();
    }, [start_process]);

    return {
        startProcess: () => setStartProcess(true),
        stopProcess: () => {
            stop.current = true;
        }
    };
};