问题让 localStorage 数据持久化

Question

I am making an app that tracks how many tasks you complete in a day. Once a task is completed the average number of tasks completed on that day is tracked relative to the total tasks completed all time. I want this to persist so I can display it but when I refresh the page it is not persisting.

When I console log the avgWednesday it updates correctly but once I refresh the page it goes back to 0 .

It is defined as:

const [avgWednesday, setAvgWednesday] = React.useState(0);

This is all within a functional component as function app(){

Function runs to calculate the average:

function addWednesday(){
  const currWednesday = totalWednesday + 1;
  setTotalWednesday(totalWednesday + 1);
  localStorage.setItem("storedTotalWednesday", currWednesday);

  const currTotalTasks = tasksFinishedTotal + 1;
  const wedAvg = (Math.round((currWednesday / currTotalTasks)*100));
  setAvgWednesday(wedAvg); 
  localStorage.setItem("storedAvgWed", avgWednesday);   //STORING HERE 
}

Using this to make it persist (for some reason never runs even when the average is updated):

React.useEffect(() => {
  const savedWedAvg = JSON.parse(localStorage.getItem("storedAvgWed")) || 0;
  setAvgWednesday(savedWedAvg);
}, []);

Answer 1

Although you are expecting for avgWednesday to be updated by setAvgWednesday but it's not happening immediately.

The setAvgWednesday is asynchronous , you should call with wedAvg instead as:

setAvgWednesday(wedAvg); 
localStorage.setItem("storedAvgWed", wedAvg);

As wedAvg has been already calculated and it's in place.

Answer 2

Figured it out thanks to @ADyson the function runs asynchronously in React so I have to store wedAvg rather than avgWednesday (var holding the calculation rather than the value itself). Storing wedAvg would store 0 since the function runs every line at the same time, storing 0 rather than the actual updated average / calculation.

function addWednesday(){
  const currWednesday = totalWednesday + 1;
  setTotalWednesday(totalWednesday + 1);
  localStorage.setItem("storedTotalWednesday", currWednesday);

  const currTotalTasks = tasksFinishedTotal + 1;
  const wedAvg = (Math.round((currWednesday / currTotalTasks)*100));
  setAvgWednesday(wedAvg); 
  localStorage.setItem("storedAvgWed", wedAvg);
}