React Hook：在外部 function 內訪問 state

Question

在 React 應用程序中，我希望 function 啟動一系列異步調用，然后能夠在這些調用運行時更改可用的 state。 例如，我會讓用戶啟動對 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);
  }
}

理想情況下，我想使用純功能組件並允許異步 function 可供多個組件使用。 所以我一直在全面使用 React Hooks。 我提出了 3 個解決方案，但沒有一個完全符合要求：

• 使用 class 組件， this.state將異步更新
  • 例子
  • 缺點：不是功能組件，異步 function 與組件綁定
• useRef()是一個建議的選項
  • 例子
  • 缺點：我們不再需要重新渲染，這是一種常見的 useRef 模式嗎？
• 從 useState 傳遞 setter，在調用它時傳遞一個 function 將檢索當前值
  • 例子
  • 缺點：看起來很hacky :)

我很好奇是否有任何類似於第三個示例的干凈方式，我只是在我有限的 React 經驗中沒有遇到過。 也歡迎其他建議！

Answer 1

為了有一個可重復使用的 function 我會在 Hook 中定義它。

以下提案使用useState來執行 function。 我們需要useState在值發生變化時觸發渲染。 該值將從 useEffect 內部調用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;
        }
    };
};

Answer 2

現在，一旦調用它，您就無法更新longProcess function 中的halt state 。 因此，您可以使用一些global object 來更新 state 但這不是最佳實踐。

所以也許看看 React 的useCallback和其他鈎子，也許改變你的循環以遞歸調用這些鈎子之一，這樣也許這有助於更新 state。 希望這會有所幫助，即使我現在不知道解決方案。