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를 사용하고 있습니다. 나는 세 가지 해결책을 생각해 냈지만 그중 어느 것도 법안에 맞지 않습니다.
this.state비동기 적으로 업데이트됩니다.
useRef()이다 제안 옵션
세 번째 예제와 비슷한 깨끗한 방법이 있는지 궁금합니다. 제한된 React 경험에서 만난 적이 없습니다. 다른 제안도 환영합니다!
재사용 가능한 기능을 갖기 위해 후크 내부에 정의합니다.
다음 제안은 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;
}
};
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다