我有一个useState变量，我想每5秒更新一次，增量为1，但是我希望它停止计数，并在达到数组长度时再次从0开始。这是我到目前为止所拥有的。现在，控制台日志令人困惑，它开始起作用，然后数字开始每秒或更快地输出一次。当我不在增量函数中运行SetShowNum时，此方法有效，但这是我需要的功能。
任何帮助将不胜感激。谢谢
const [showNum, SetShowNum] = useState(0)
useEffect(() => {
var i = 0
var interval = setInterval(increment, 5000)
var stop = data.allSanityProducts.edges.length // right now equates to 4
function increment() {
i = i + 1
if (i === stop) {
i = 0
}
console.log(i)
SetShowNum(i)
}
})
在此解决方案中，我为useEffect添加了一个依赖项数组作为第二个参数。这样可以确保useEffect仅在首次安装组件时运行。否则，您编写的useEffect将在每次重新渲染时继续运行，因此这就是为什么您看到内存泄漏和所有日志语句的原因。我在useEffect中添加了日志语句以观察此行为。我建议在有和没有依赖项数组的情况下运行代码，以观察重新渲染的发生。
React文档：
“如果要运行一个效果并仅对其进行一次清理（在安装和卸载时），则可以传递一个空数组（[]）作为第二个参数。这告诉React您的效果不依赖于任何来自道具或状态，因此它永远不需要重新运行。这不是特殊情况-它直接取决于依赖项数组始终如何工作。”
const Component = () => {
console.log("rerender");
const [showNum, SetShowNum] = useState(0);
useEffect(() => {
console.log("running useEffect");
var i = 0;
var interval = setInterval(increment, 5000);
// var stop = data.allSanityProducts.edges.length // right now equates to 4
const stop = 4;
function increment() {
i = i + 1;
if (i === stop) {
i = 0;
}
console.log(i);
SetShowNum(i);
}
}, []);
return (...)
};
链接到React useEffect文档：https ://reactjs.org/docs/hooks-effect.html
链接到codesandbox：https：//codesandbox.io/s/nameless-sunset-1qyq4 ？ file = / src / SO.js：0-590
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句