导航时将进度条状态保持在旧状态

Question

你好，我在为我的模板创建进度条时遇到问题，但是当我在路线页面中导航时，我的进度条重新启动并从 0 开始，我尝试了很多方法，但没有像 localstorage 那样成功，并将其移动到高级组件，这是我的代码:

`import { useContext, useEffect, useState } from "react";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import DepositContext from "../Deposit/PaymentWindows/DepositContext";
import { styled } from "@mui/material";

const ProgressBarTimer = () => {
  const { delayCount } = useContext(DepositContext);
  const [progress, setProgress] = useState(0);


`  useEffect(() => {
    const handleProgress = () => {
      const interval = setInterval(() => {
        setProgress((prevProgress) =>
          prevProgress === 100 ? 0 : prevProgress + 1
        );
      }, delayCount);
      return () => clearInterval(interval);
    };

    handleProgress();
  }, [delayCount]);

Answer 1

我不知道这是否解决了您的问题，但清除间隔代码不正确

 useEffect(() => {
      const interval = setInterval(() => {
        setProgress((prevProgress) =>
          prevProgress === 100 ? 0 : prevProgress + 1
        );
      }, delayCount);
      return () => clearInterval(interval);
  }, [delayCount]);

您可以进行全局状态管理并将“进度”移至全局状态。我推荐了jotai