使用 setInterval 定期更新 append 新数据时，Recharts 图表不会更新

Question

I'm trying to set up a web page that adds a score onto a line chart every 2 minutes and it doesn't seem to be working.

The chart that I am using is the line chart from the Recharts, and the initial value of scoreData is an empty list and the initial form of {time} is {h:0, m:0, s:0}.

I am using context and hooks so that the page won't stop counting even if the user for some reason temporarily visits other pages that I will be creating.

The code that I wrote down is as follows;

const Timer = () => {
  const {
    scoreData,
    setScoreData,
    time,
    setTime,
    interv,
    setInterv,
  } = useContext(BaseContext);

const addNewData = () => {
    setScoreData([...score, {Some New data}])
}

const start = () => {
    run();
    setInterv(setInterval(run, 1000));
 };

var updatedS = time.s,
    updatedM = time.m,
    updatedH = time.h;

  const run = () => {
    updatedS++;
    if (updatedS === 60) {
      updatedM++;
      updatedS = 0;
      if (updatedM % 2 == 0) {
        addNewData();
        console.log(scoreData.length);
      }
    }
    if (updatedM === 60) {
      updatedH++;
      updatedM = 0;
    }
    return setTime({
      s: updatedS,
      m: updatedM,
      h: updatedH,
    });
  };

return (
<div>
// The code of the line chart goes in here.

<button onClick={start}>Start</button>

<button onClick={addNewData}>Test Button</button>

</div>
)

According to the above code, a new data should be added to the list every two minutes, but the chart never showed any changes.

When I confirmed the status of the scoreData by using console.log(scoreData.length), the console just showed 0, which means the data is not being appended into the list.

So I tried a different approach by making a Test Button that manually adds a new data and it worked just fine; the list was filled with new data every time I pushed it.

In this case, what can I do to make the chart receive the data periodically in accordance to the time that I set up?

Answer 1

Ciao, unfortunately with react hooks you cannot use setInterval in the way you are using it. The problem is related to hooks itself. According to your code example, you want to add a new data to your scoreData each second. So you call useInterval that launches run that, if (updatedM % 2 == 0) , calls addNewData that finally adds value to your scoreData .

Unfortunately, with hooks you are not sure that scoreData is already updated with data you added in previuos setInterval . Why? Because hooks are async!

How to solve this? With another hook, in particular a custom hook!

Here a working example. Lets see my custom hook useInterval :

function useInterval(callback, delay) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
      savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }

As you can see inside my custom hook I use 2 useEffect : 1 to remember the latest useInterval callback (using useRef ); and the other one is used to set the delay of the setInterval (this last useEffect returns a clearInterval to cancel the last setInterval ).

Then I can call useInterval inside my component:

useInterval(() => {
if (sampling) {
  let result = _.cloneDeep(list1);
  result.push({
    x: Math.floor(Math.random() * 100),
    y: Math.floor(Math.random() * 100)
  });
  console.log(result);
  setlist1(result);
}
}, 1000);

list1 is my array of values (your scoreData ) and sampling is a bool state variable that I use to run/stop insertion of new vlaues into list1 .

Finally, my return :

return (
    <div>
      <ScatterChart
        width={600}
        height={400}
        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
      >
        <CartesianGrid />
        <XAxis type="number" dataKey={"x"} />
        <YAxis type="number" dataKey={"y"} />
        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
        <Legend />
        <Scatter
          name="values"
          data={list1}
          fill="#8884d8"
          line
          shape="circle"
        />
      </ScatterChart>
      <button onClick={start}>
        {sampling ? "Stop sampling" : "Start sampling"}
      </button>
    </div>
  );

I used ScatterChart (graphically equal to LineChart ) and a button to start/stop data sampling.

Answer 2

I assume that setScoreData([...score, {Some New data}]) should be setScoreData([...scoreData, {Some New data}])

Your setInterval receives a closure with fixed scoreData and keeps calling it. So setScoreData([...scoreData, {Some New data}]) always sets the same data. In your case it is better to fix this issue with useRef hook:

  const {
    scoreData,
    setScoreData,
    time,
    setTime,
    interv,
    setInterv,
  } = useContext(BaseContext);
  const scoreDataRef = useRef(scoreData);
  scoreDataRef.current = scoreData;

  const addNewData = () => {
    setScoreData([...scoreDataRef.current, {Some New data}])
  }

Test button works because it gets a new closure on each render.