React中使用useState時狀態(tài)更新不生效的原因及解決方法
一、正常情況
useState 返回的 set 方法是更新狀態(tài)的關(guān)鍵。我們需要確保在適當(dāng)?shù)牡胤秸{(diào)用它，通常是在事件處理函數(shù)或異步操作的回調(diào)中。
示例代碼
import React, { useState, useEffect } from 'react'
const MyComponent = () => {
const [count, setCount] = useState(1)
const increment = () => {
setCount(count + 1)
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}
export default MyComponent
在這個例子中，當(dāng)點(diǎn)擊按鈕時，increment 函數(shù)會調(diào)用 setCount 來更新 count 的值，從而觸發(fā)組件重新渲染。
二、不正常情況
再看下面的例子，我想監(jiān)聽鍵盤的按下事件，每按一次加1，按照這個思路執(zhí)行，代碼沒有任何問題，看是真會如愿以償嗎？
import React, { useState, useEffect } from 'react'
const MyComponent = () => {
const [count, setCount] = useState(1)
useEffect(() => {
// 監(jiān)聽全局鍵盤事件
window.addEventListener('keydown', onWindowKeyDown)
return () => {
// 移除全局鍵盤事件
window.removeEventListener('keydown', onWindowKeyDown)
}
}, [])
const onWindowKeyDown = () => {
console.log('keyDown：', count)
setCount(count + 1)
}
return (
<div>
<p>Count: {count}</p>
</div>
)
}
export default MyComponent
通過控制臺查看，無論執(zhí)行多少次count始終都是1，setCount(count + 1)始終都是2。
問題原因
- 組件初始化時， count 狀態(tài)被設(shè)置為1
- useEffect 鉤子只在組件首次渲染時運(yùn)行一次（因?yàn)橐蕾嚁?shù)組為空 [] ）
- 在 useEffect 中， onWindowKeyDown 函數(shù)創(chuàng)建了一個閉包，它捕獲了當(dāng)時的 count 值（即初始值1）
- 每次按下鍵盤時，調(diào)用的是這個閉包函數(shù)，它總是引用初始的 count 值（1）
- 因此，每次調(diào)用 setCount(count + 1) 實(shí)際上都是執(zhí)行 setCount(1 + 1) ，導(dǎo)致 count 永遠(yuǎn)只會被設(shè)置為2
- 即使 state 更新導(dǎo)致組件重新渲染，由于 useEffect 的依賴數(shù)組為空，它不會再次運(yùn)行，閉包中的 count 值也不會更新
如何解決這個問題，不要慌，經(jīng)過我不懈的研究，終于解決了，我們可以使用函數(shù)形式來更新狀態(tài)。這樣可以確保我們總是在最新的狀態(tài)基礎(chǔ)上進(jìn)行更新。
示例代碼
const onWindowKeyDown = () => {
setCount(prevCount => prevCount + 1) // 使用函數(shù)形式
}
在這種形式下，setCount 接收一個函數(shù)作為參數(shù)，該函數(shù)的參數(shù)是當(dāng)前的狀態(tài)值 prevCount，函數(shù)的返回值就是新的狀態(tài)值。這種方式可以保證獲取到的是最新的狀態(tài)值。
以上就是React中使用useState時狀態(tài)更新不生效的原因及解決方法的詳細(xì)內(nèi)容，更多關(guān)于React使用useState狀態(tài)更新不生效的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React?中hooks之?React.memo?和?useMemo用法示例總結(jié)
React.memo是一個高階組件,用于優(yōu)化函數(shù)組件的性能,通過記憶組件渲染結(jié)果來避免不必要的重新渲染,合理使用React.memo和useMemo可以顯著提升React應(yīng)用的性能,本文介紹React?中hooks之?React.memo?和?useMemo用法總結(jié),感興趣的朋友一起看看吧2025-01-01
react配合antd組件實(shí)現(xiàn)的管理系統(tǒng)示例代碼
這篇文章主要介紹了react配合antd組件實(shí)現(xiàn)的管理系統(tǒng)示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
React引入css的幾種方式及應(yīng)用小結(jié)
這篇文章主要介紹了React引入css的幾種方式及應(yīng)用小結(jié),操作styled組件的樣式屬性,可在組件標(biāo)簽上定義屬性、也可以通過attrs定義屬性,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過實(shí)踐案例展示如何封裝和使用一個?React?鑒權(quán)組件,需要的可以參考下2024-03-03
React中useRef與useState的使用與區(qū)別
本文介紹了React中兩個常用的鉤子useRef和useState,包含比較它們的功能并提供示例來說明它們的用法,具有一定的參考價值,感興趣的可以了解一下2024-11-11
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
這篇文章主要介紹了react中antd文本框限制輸入中文方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
合成事件不是瀏覽器本身觸發(fā)的事件，自己創(chuàng)建和觸發(fā)的事件。本文將從源碼角度帶大家一起深入了解下React中的合成事件，需要的可以參考一下2022-11-11
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07