在頁面重繪時，進度值變為0并移動到下一頁ReactRedux

我想在 MongoDB 中保存進度，然后顯示進度。進度值正在計算和更新。但是當我進行頁面重繪 時，進度值變為 0，并且在兩者之間移動到下一頁。

const Quiz = (props) => {
   const {progress: lastProgress, userId} = props; 
    const [progress, setProgress] = useState(lastProgress || 0);
    const dispatch = useDispatch();
    const history = useHistory();
  
    const classes = useStyles();
    

useEffect(() => {
    
          async function fetchProgress(){
            try{
          const progress = await api.get(paths.FETCH_USER);
          const newprogress = progress.progress;
          console.log(newprogress   "alpha");
          if (newprogress <= 100) {
            setProgress(Number(newprogress));
          }}
        catch(error){
          console.log(error);
        }
        };
          fetchProgress();
        }, []);
      
      
        useEffect(() => {
          async function updateProgress() {
            try {
              await api.patch(paths.UPDATE_USER, JSON.stringify({progress}))
                console.log(progress   "valueof");
            }
            catch(error){
              console.log("error", error);
            }
          };
          updateProgress();
        }, [progress]);
      
       function handleSubmit(event) {
            event.preventDefault();
             
            const valid = questions.some((q) => !q.value);
            console.log(valid   "questionsalpha");
            if (!valid) {
                dispatch(postAssessment({ responses: questions, id: assessment.id }, history));
            }
            setCurrentQuestion(0);
           setChecked((previousState) => !previousState);
           setTimeout(() => { 
            setChecked(previousState => ({
                 afterPreviousChange: previousState.previousChange
               }))
          }, 1000);
          setProgress((prevProgress)=> prevProgress   10);  
        
        }
        return (
       <Grid item md={4} >
                <Fragment>
                  <Grid item xs={12} md={6} sm={6}>
                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Box sx={{ width: '100%', mr: 1 }}>
                    <LinearProgress variant="determinate" orientation="vertical" value={progress} />
                    </Box>
                    </Box>
                  </Grid>
                </Fragment>
    
              </Grid>
              )
    );

我能夠計算進度值并存盤該值，但在頁面重繪 時進度值更改為 0。不知道我犯了什么錯誤。任何幫助將不勝感激。

uj5u.com熱心網友回復：

我認為您所需要的只是將progress狀態保存到長期存盤中，以便在頁面重新加載后可以訪問它。使用 localStorage 在更新時保持progress狀態。progress懶惰地從 localStorage初始化狀態。這避免了通過 PATCH 請求意外將進度“重置”回 0 的任何問題。

例子：

const Quiz = (props) => {
  ... 
  const [progress, setProgress] = useState(() => {
    return Number(JSON.parse(localStorage.getItem("progress")) ?? 0);
  });

  ...
    
  useEffect(() => {
    async function fetchProgress() {
      try {
        const { progress } = await api.get(paths.FETCH_USER);
        console.log(progress   "alpha");
        if (progress <= 100) {
          setProgress(Number(progress));
        }
      } catch(error) {
        console.log(error);
      }
    };

    fetchProgress();
  }, []);
      
  useEffect(() => {
    async function updateProgress() {
      try {
        await api.patch(paths.UPDATE_USER, JSON.stringify({ progress }))
        console.log(progress   "valueof");
      } catch(error){
        console.log("error", error);
      }
    };

    updateProgress();
    localStorage.setItem("progress", JSON.stringify(progress));
  }, [progress]);
      
  function handleSubmit(event) {
    event.preventDefault();
    ...
    setProgress((progress) => progress   10);  
  }

  ...
);

標籤：反应 mongodb 反应还原 反应钩子

上一篇：嘗試在集合上呼叫distinct時出現Pymongo錯誤

下一篇：解組bson.D物件（Golang）