如何在功能组件中保存变量的值

Question

我在Hooks的内部有变量myintervalfunctional component，我今年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第一次它不是空的，但第二次它是空的。

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

我想要什么？

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

根据我的需要，我不能在function App(props){}之外声明我的myinterval变量。

这里有一个例子，我展示了它非常简单。简单代码示例

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>;
}

Answer 2

let myinterval = null;

每次在每次渲染上运行

useEffect(()=>{
myinterval = setInterval(()=> {}, 100);
}, []);

仅在装载时运行，myinterval具有null值

修复您想要实现的目标：

import React, { useState, useEffect, useMemo } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [name, setName] = useState("Muhammad");
const [timeout, setTimeout] = useState("init value");
useEffect(() => {
setInterval(() => setTimeout("new value"), 3000);
}, []);
const print = async () => {
setName("setting name");
console.log(timeout);
};
return (
<button className="App" onClick={print}>
hey
</button>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);