首頁猿問 React 組件發生意外反應

React 組件發生意外反應

JavaScript

莫回無 2023-07-14 16:51:22

以下是一個簡單的反應組件：import React from "react";import { useState } from "react";export default function Comp() { let [count, setCount] = useState(1); function countUp(){ setCount(count + 1); } setInterval(countUp, 1000); return <h2>{count}</h2>}我預計計數器每秒都會上升但由于某種原因，十 - 二十秒后開始出現問題請參閱此處： https ://stackblitz.com/edit/react-az7qgn?file=src/comp.jsx誰能解釋一下嗎？

查看完整描述

2 回答

慕俠2389804

TA貢獻1719條經驗獲得超6個贊

您應該使用useEffect鉤子來正確設置它。我可以舉個例子。

import React, { useState, useEffect } from "react";

export default function Comp() {

? const [count, setCount] = useState(1);

? useEffect(() => {

? ? const interval = setInterval(() => {

? ? ? setCount(state => state + 1);

? ? }, 1000);

? ? return () => clearInterval(interval);

? }, []);

? return <h2>{count}</h2>

}

一些注釋。

一般來說，你會const更喜歡let，但在解構來自 React 的東西時這是強制性的。

基本上，useEffect允許您實現與類組件類似的結果componentDidMount和生命周期方法。componentDidUpdate此外，在這種特定情況下，通過在回調中返回一個函數useEffect，我們確保在需要清理時（這意味著每次運行后）清除計劃的回調。這實際上避免了將許多東西堆疊在一起的混亂setInterval。

另外，當您setCount最好使用回調形式獲取先前的狀態時，因為它始終是最新的。

反對回復 2023-07-14

隔江千里

TA貢獻1906條經驗獲得超10個贊

當調用 setInterval() 時，它返回一個間隔 id。您的代碼沒有保存變量，因此您無法重置它。在較小的迭代中，您不會看到每次迭代的更改。但是，隨著 setInterval() 被調用的次數從 0 增加到 N，更多的計時器被啟動，并且您將很快看到數字隨著它們的增加而閃爍，因為每個間隔都在改變的狀態count。

換句話說，隨著時間的推移，您將創建越來越多的計時器，而不是創建一次性使用的計時器。您需要打電話clearInterval(timer_id_goes_here)來清除計時器。

反對回復 2023-07-14

2 回答
0 關注
140 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

React 組件發生意外反應

React 組件發生意外反應

2 回答

添加回答