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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJS:為什么一種狀態的值不同?

ReactJS:為什么一種狀態的值不同?

大話西游666 2021-12-12 17:46:15
所以我正在使用非?;镜慕M件進入 Reactjs。我從不同的函數注銷相同的狀態,但我看到的是不同的值。import React, { useState, useEffect, useRef } from "react";const Test = props => {  const [count, setCount] = useState(0);  useEffect(()=>{      setInterval(() => {        console.log("count in interval is:", count);      }, 1000);  },[props]);  function btnClick() {    const newCount = count + 1;    setCount(newCount);    console.log("count changed to: ", newCount);  }  return (    <div>      count is {count}      <br></br>      <button onClick={btnClick}>+</button>    </div>  );};export default Test;單擊并等待后輸出,日志為:Test.js:8 count in interval is: 0Test.js:15 count changed to:  1Test.js:15 count changed to:  2Test.js:15 count changed to:  3Test.js:15 count changed to:  4(8 rows) Test.js:8 count in interval is: 0我希望兩個函數中的“計數”相同。任何人都可以解釋這一點嗎?非常感謝。
查看完整描述

2 回答

?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

Test只有一個setInterval函數,其中countalways 0。因為它僅在初始渲染期間創建。


它從未有另一個setInterval創建因為效果從來沒有得到觸發與[props]作為依賴。


要setInterval在每次重新渲染時更改 's 計數:


移除依賴

在效果中返回一個清理函數

useEffect(

  () => {

    const t = setInterval(() => {

      console.log("count in interval is:", count);

    }, 1000);


    return () => clearInterval(t); // cleanup on every re-render

  }

  // no dependency: effect runs on every re-render

);


但是上面的代碼會有一個警告:


“缺少count依賴”


因此,只需添加count為依賴項即可僅在count更改時運行效果。


useEffect(

  () => {

    const t = setInterval(() => {

      console.log("count in interval is:", count);

    }, 1000);


    return () => clearInterval(t); // cleanup "old" setInterval

  }

  , [count] // ony run effect every time count changes

);


查看完整回答
反對 回復 2021-12-12
?
皈依舞

TA貢獻1851條經驗 獲得超3個贊

的值count不會改變,這是預期的行為,雖然不是一個明顯的行為。

看,你甚至聲明count為 a const count,它是不可變的。相反發生的事情是在第一次渲染期間count獲得了0. 的值count從不改變,而是在Test每次更改狀態時調用組件,并且函數useState為常量分配不同的值count,每次都是新的常量。

因此,在第一次渲染期間,被調用的函數內部const count閉包捕獲了setInterval的值,并且該值0永遠保持不變。


查看完整回答
反對 回復 2021-12-12
  • 2 回答
  • 0 關注
  • 226 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號