3 回答
TA贡献1820条经验 获得超9个赞
它会在您的组件每次渲染时创建一个新的间隔,这会导致它再次渲染并最终导致无限循环。
尝试这个:
import React, {useState, useEffect, useCallback} from "react";
import "./styles.css";
const arrayName = ['Tom','Alice','Matt','Chris'];
export default function App() {
const [name, setName] = useState();
const nameChange = useCallback(() => {
const rand = Math.floor(Math.random()*arrayName.length);
setName(arrayName[rand])
}, []);
useEffect(() => {
const interval = setInterval(() => {
setName('');
nameChange();
}, 2000)
return () => clearInterval(interval)
}, [nameChange]);
return (
<div className="App">
<h1>Hello {name}</h1>
</div>
);
}
TA贡献1842条经验 获得超21个赞
问题是你从不这样做clearInterval。每当组件调用时render,都会发出一个新的间隔。
Wrap setIntervalin useEffect,它在组件呈现时被调用。的返回useEffect是一个函数,它指示组件卸载阶段发生的事情。在这里查看更多
useEffect(){
const tmp = setInterval(()=>{
setName('');
nameChange();
console.log(name);
}, 2000)
return () => { clearInterval(tmp); };
}
TA贡献2041条经验 获得超4个赞
问题是每次渲染您的组件时,您都会创建一个新的间隔。
解决办法是把setInterval的调用包装在useEffect中,然后返回一个函数给useEffect清除interval。
import React, { useState, useCallback, useEffect } from 'react';
import './styles.css';
const arrayName = ['Tom', 'Alice', 'Matt', 'Chris'];
export default function App() {
const [name, setName] = useState();
const nameChange = useCallback(() => {
const rand = Math.floor(Math.random() * arrayName.length);
setName(arrayName[rand]);
}, [setName]);
useEffect(() => {
const intervalId = setInterval(() => {
setName('');
nameChange();
}, 2000);
return () => clearInterval(intervalId);
}, [nameChange]);
return (
<div className="App">
<h1>Hello {name}</h1>
</div>
);
}
添加回答
举报