第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

為什么我的計(jì)時(shí)器組件在將依賴項(xiàng)傳遞給 useEffect 時(shí)表現(xiàn)奇怪？

為什么我的計(jì)時(shí)器組件在將依賴項(xiàng)傳遞給 useEffect 時(shí)表現(xiàn)奇怪？

回首憶惘然 2023-09-28 17:46:21
我使用以下計(jì)時(shí)器useEffect并向其傳遞函數(shù)依賴項(xiàng)：const Timer = () => {  const [count, setCount] = useState(0);  const setId = () => {    const id = setInterval(() => {      setCount(count + 1);    }, 1000);    return () => clearInterval(id);  }  useEffect(() => {    setId();  }, [setId])}然而計(jì)時(shí)器的行為很奇怪：前幾秒是正常的，然后它開(kāi)始隨機(jī)顯示計(jì)數(shù)。是什么導(dǎo)致了這個(gè)問(wèn)題？正確的做法是什么？
查看完整描述

3 回答

?
FFIVE

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

afimport React, { useCallback, useState, useEffect, useRef } from "react";

import "./styles.css";


export default function App() {

? let [count, setCount] = useState(0);


? useInterval(() => {

? ? setCount(count + 1);

? }, 1000);


? return <div className="App">{count}</div>;

}


function useInterval(callback, delay) {

? const savedCallback = useRef();


? // Remember the latest callback.

? useEffect(() => {

? ? savedCallback.current = callback;

? }, [callback]);


? // Set up the interval.

? useEffect(() => {

? ? function tick() {

? ? ? savedCallback.current();

? ? }

? ? if (delay !== null) {

? ? ? let id = setInterval(tick, delay);

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

? ? }

? }, [delay]);

}

工作代碼沙箱

更新

正如 keith 建議的那樣，不要將函數(shù)傳遞給數(shù)組 deps，如下所示。

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

import "./styles.css";


export default function App() {

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


? useEffect(() => {

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

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

? ? }, 1000);


? ? return () => {

? ? ? clearInterval(interval);

? ? };

? }, []);


? return <div>{count}</div>;

}


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊

還是不太清楚為什么可以通過(guò)[]

也許需要更多解釋，不幸的是評(píng)論太多，所以我發(fā)布了這個(gè)。

要回答這個(gè)問(wèn)題，我們需要退一步，首先問(wèn)，依賴數(shù)組的意義是什么？簡(jiǎn)單的答案是 useEffect 中任何依賴于某些內(nèi)容的內(nèi)容，如果從需要不同處理的 useState 或 Props 進(jìn)行更改，則需要將其放入數(shù)組中。

例如，如果您有一個(gè)僅顯示用戶配置文件的組件，但獲取此信息是異步的，因此需要 useEffect。它可能看起來(lái)像這樣 ->

<UserProfile userId={userId}/>

現(xiàn)在的問(wèn)題是，如果我們[]作為依賴項(xiàng)傳遞，則 useEffect 不會(huì)為新的 userId 重新觸發(fā)，因此 props 可能會(huì)說(shuō)userId = 2，但我們當(dāng)前存儲(chǔ)在狀態(tài)中的數(shù)據(jù)是 for userId = 1,.. 所以對(duì)于這樣的東西[props.userId]完全有道理。

那么回到 OP 的組件，<App/>這里有什么會(huì)改變的？好吧，這不是道具，因?yàn)闆](méi)有被傳遞。那么count您可能會(huì)問(wèn)，我們?cè)俅螁?wèn)自己這個(gè)問(wèn)題，計(jì)數(shù)狀態(tài)是否保證 setInterval 的新實(shí)例被銷毀/創(chuàng)建？當(dāng)然，這里的答案是否定的，因此[]在這里傳遞是完全有意義的。

希望這是有道理的。


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

清除卸載時(shí)的間隔


useEffect(() => {

    let id;

    const setId = () => {

      id = setInterval(() => {

        setCount((count) => count + 1);

      }, 1000);

    };

    setId();

    return () => clearInterval(id);

  }, []);


查看完整回答
反對(duì) 回復(fù) 2023-09-28
  • 3 回答
  • 0 關(guān)注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)