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

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

setColor() 如何引用最新的顏色變量?

setColor() 如何引用最新的顏色變量?

皈依舞 2023-11-02 22:34:08
export default function App() {  let [color, setColor] = useState("red");  useEffect(() => {    setColor("blue");    setTimeout(() => {      console.log(color);      setColor("purple");    }, 1000);  }, []);  function revealColor() {    console.log(color);  }  return <button onClick={revealColor}>Click after 1 second to reveal color</button>}沙盒根據上一個問題,我知道setTimeout回調引用了第一個color變量(紅色)。不知何故,它setColor設法更改了最新的color變量(通過單擊記錄“紫色”的按鈕即可證明)。怎么會這樣呢?我想setColor同樣會引用舊setColor變量。setColor("blue");PS“舊”,我指的是重新執行返回新變量/函數的整個組件的事實color。
查看完整描述

2 回答

?
守候你守候我

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

setColor是一個改變color狀態的函數。它不會直接更改color變量。

每次狀態改變時App函數都會重新運行。

因此,當它第一次運行時useState("red"),它調用 ,發現不存在現有狀態,將狀態設置為"red"然后將狀態 ( "red") 分配給color。DOM 將根據結果進行更新。

setColor("blue");"blue"更改導致App再次運行的狀態。已經存在一個狀態,因此color設置為"blue"。它不是用 初始化的"red"。DOM 將根據結果進行更新。

一秒鐘后,超時解決并將setColor("purple");顏色設置為"purple"導致再次App運行的狀態。已經存在一個狀態,因此設置為。color"purple"

每次更新 DOM 時,它都會revealColor傳遞一個新函數,onClick該函數已關閉color最近調用的變量App。


同時,您傳遞給的函數useEffect僅運行一次(因為您[]作為第二個參數傳遞),因此color它關閉的變量是原始變量,您將"red"在那里記錄。


查看完整回答
反對 回復 2023-11-02
?
慕哥6287543

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

這是因為你沒有包含color在 的依賴數組中useEffect。因此,useEffect不知道已經color改變。如果將其包含在依賴項數組中,則每當更改useEffect時都會觸發。color因此,您blue登錄時就可以看到。


useEffect(() => {

    setColor("blue");

    setTimeout(() => {

      console.log(color);

      setColor("purple");

    }, 1000);

  }, [color]); // <- dependency array


查看完整回答
反對 回復 2023-11-02
  • 2 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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