无法对 setInterval 的未安装组件执行 React 状态更新

Question

我收到警告 “无法对未安装的组件执行 React 状态更新” 当我运行这个代码

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);
  }
}, []);

无法对 setInterval 的未安装组件执行 React 状态更新

Can't perform a React state update on an unmounted component for setInterval

javascript

ecmascript-6

reactjs