首頁猿問 React 中的...

React 中的 setInterval 錯誤

JavaScript

HUH函數 2023-04-27 17:14:23

這個案子有什么問題。我想顯示一個隨機名稱并每 2 秒更改一次，但幾秒鐘后它會不斷變化，即使我清理 setName 時名稱也會被覆蓋？import React, {useState} from "react";import "./styles.css";export default function App() { const [name, setName] = useState(); const arrayName = ['Tom','Alice','Matt','Chris']; const nameChange = () => { const rand = Math.floor(Math.random()*arrayName.length); setName(arrayName[rand]) } setInterval(()=>{ setName(''); nameChange(); console.log(name); }, 2000) return ( <div className="App"> <h1>Hello {name}</h1> </div> );}

查看完整描述

3 回答

慕妹3146593

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 (

<h1>Hello {name}</h1>

</div>

);

}

反對回復 2023-04-27

茅侃侃

TA貢獻1842條經驗獲得超21個贊

問題是你從不這樣做clearInterval。每當組件調用時render，都會發出一個新的間隔。

Wrap setIntervalin useEffect，它在組件呈現時被調用。的返回useEffect是一個函數，它指示組件卸載階段發生的事情。在這里查看更多

useEffect(){

const tmp = setInterval(()=>{

setName('');

nameChange();

console.log(name);

}, 2000)

return () => { clearInterval(tmp); };

}

反對回復 2023-04-27

縹緲止盈

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 (

<h1>Hello {name}</h1>

</div>

);

}

反對回復 2023-04-27

3 回答
0 關注
230 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React 中的 setInterval 錯誤

React 中的 setInterval 錯誤

3 回答

添加回答