無法對 setInterval 的未安裝組件執行 React state 更新

Question

當我運行此代碼時，我收到警告“無法在未安裝的組件上執行 React state 更新”

function timer() {

    const [dateState, setDateState] = useState(new Date());
    useEffect(() => {
            setInterval(() => setDateState(new Date()), 1000);
    }, []);

    return(
        <div className="container">
        <p className="text-end text-danger">{dateState.toLocaleDateString('fr-BE' , {
                day : 'numeric',
                month : 'short',
                year: 'numeric'
            })}</p>
        <div className="text-center">
            <h3 className="text-info">
                {dateState.toLocaleString('fr-BE', {
                    hour: 'numeric',
                    minute: 'numeric',
                    second : 'numeric',
                    hour24: true,
                })}
            </h3>
            </div>
        </div>
    )
}

export default timer;

我試着做

    const [dateState, setDateState] = useState(new Date());
    useEffect(() => {
        let mount = true;
        if(mount){
            setInterval(() => setDateState(new Date()), 1000);
        }
        return () => { isMounted = false };
    }, []);

但仍然無法正常工作，我有點卡住了......

Answer 1

您需要在組件卸載時清理 setInterval 計時器，例如：

useEffect(() => {
  const interval = setInterval(() => setDateState(new Date()), 1000);

  return () => {
    clearInterval(interval);
  }
}, []);