尝试以间隔更改 React Hooks 中的 state

Question

I have a problem trying to change a state in react using setInterval . Why does the function "alert" always show a "null" message?

import React, { useEffect, useState } from 'react';

const Playlist = (props) => {

  const [test, setTest] = useState("");

  useEffect(() => {
    setInterval(load, 3000)
  }, []);

  const load = async () => {
    alert(test)
    setTest("TEST");
  }

  return (
    <div>
      {test}
    </div>
  )
}

export default Playlist

Answer 1

Issue:

is callback passed into setInterval 's closure and it accesses the test variable in the first render.

Solution:

You can clearInterval and setInterval as soon as there is any changes in your state

 const { useState, useEffect, useCallback } = React; const App = () => { const [test, setTest] = useState(""); useEffect(() => { const intrvl = setInterval(load, 3000); return () => clearInterval(intrvl); }, [test]); const load = () => { alert(test) setTest("TEST"); } return ( <div> {test} </div> ) } ReactDOM.render(<App />, document.getElementById('react-root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react-root"></div>

Answer 2

The problem is that useEffect captures the test from the first render which is equal to empty string. We never re-apply the effect so the closure in setInterval always references the test from the first render.

NOTE: setInterval does not describe a process in time — once you set the interval, you can't change anything about it except clearing it.

When we pass an empty [] array of dependencies to useEffect, it only runs the useEffect on mount and cleanup on unmount of the component.

One way is to add test to the array of dependencies so anytime there is an update on test, the useEffect will be called.

 useEffect(() => {
   const intervalId = setInterval(load, 3000);
   return () => clearInterval(intervalId);
 }, [test]);

But since we are using the test inside useEffect, we can just remove the empty [] array of dependencies so the useEffect will be called every time we are setting the state (component is re-rendered) and the new setInterval will be created with accessing to the latest test state like below

useEffect(() => {
   const intervalId = setInterval(load, 3000);
   return () => clearInterval(intervalId);
});

Another possible way is to update the state inside the interval's closure like

useEffect(() => {
  const id = setInterval(() => {
    setTest("TEST");
  }, 3000);
  return () => clearInterval(id);
});

---

const App = () => {
  const [test, setTest] = useState("");

  useEffect(() => {
    const intervalId = setInterval(load, 3000);
    return () => clearInterval(intervalId);
  });

  const load = () => {
    alert(test)
    setTest("TEST");
  }

  return (
    <div>
      {test}
    </div>
  )
}

Example of interval with setting count so you can see the state change