如何在函数组件中保存变量的值

Question

我有变量myinterval里面functional component有钩子，和我更新和ASIGN新价值这myinterval，只是里面useEffect。

但是在状态获取更新后myinterval保存了 prev 值，我的意思是我在功能组件中初始化的值。

function App(props) {

  const [name, setName] = useState('Muhammad');

  let myinterval = null;

  useEffect(()=>{

    myinterval = setInterval(()=> {}, 100);

  }, []);

  const print = async () => {
    setName('new name');
     console.log(myinterval);
  };

  return <button className="App" onClick={print}>hey</button>;
}

现在你可以看到，当我点击print function 时，第一次它不是空的，但第二次它是空的。

这是因为setName('new name');，实际上在setName('new name');调用之后，然后myinterval返回空值。

我想要的是？

我希望myinterval变量应该始终返回内部重新初始化的值useEffect。

根据我的需要，我不能myinterval在function App(props){}.

这是我展示的一个非常简单的例子。 简单代码示例

Answer 1

这将仅在第一次渲染时设置间隔并在卸载时取消它

useEffect(()=>{
    myInterval = setInterval(()=> {}, 100);
    return () => clearInterval(myInterval)
  }, []);
}

如果要存储对间隔 id 的引用，则不应使用普通变量（在每次渲染时设置），而应使用带有 useRef 钩子的 React ref

function App(props) {

  const [name, setName] = useState('Muhammad');

  const myInterval = useRef(null)

  useEffect(()=>{
    myInterval.current = setInterval(()=> {}, 100);
    return () => {
      if (myInterval.current) { 
        clearInterval(myInterval.current)
        myInterval.current = null
      }
    }
  }, []);

  const print = async () => {
    setName('new name');
     console.log(myInterval.current);
  };

  return <button className="App" onClick={print}>hey</button>;
}