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