useEffect 후크에 의해 호출되는 함수 호출을 중지하기 위해`onClick` 이벤트를 사용하는 방법은 무엇입니까?

debugcn 에 게시 Dev

그렉

onClick이벤트 를 사용하여 반복되는 함수 호출을 중지하는 방법은 무엇입니까? useEffect, setInterval및을 ( 를) 사용하기 때문에 함수 호출이 반복 clearInterval됩니다.

이 기사에 표시된 예제 , 아래 코드는 영원히 실행됩니다. 를 <header></header>클릭하면 함수가 호출되지 않도록하는 방법 은 무엇입니까?

import React, { useState, useEffect } from 'react';

const IntervalExample = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        {seconds} seconds have elapsed since mounting.
      </header>
    </div>
  );
};

export default IntervalExample;

또는 Drori

라는 다른 상태를 추가 running하고 useEffect종속 상태로 만듭니다 . running가로 전환 될 때마다 false의 정리 기능에 의해 간격이 지워집니다 useEffect. 이후 running입니다 false우리는 새로운 간격을 설정 건너 뜁니다. 로 전환 할 때마다 true다시 시작됩니다.

const { useState, useEffect, useCallback } = React;

const IntervalExample = () => {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(true);
  
  const toggleRunning = useCallback(
    () => setRunning(run => !run)
  , []);

  useEffect(() => {
    if(!running) {
      // setSeconds(0); // if you want to reset it as well
      return;
    }
    
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [running]);

  return (
    <div className="App">
      <header className="App-header">
        {seconds} seconds have elapsed since mounting.
      </header>
      
      <button
        onClick={toggleRunning}
        >
        {running ? 'running' : 'stopped'}
      </button>
    </div>
  );
};

ReactDOM.render(
  <IntervalExample />,
  root
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사