React中使用useState時狀態(tài)更新不生效的原因及解決方法
一、正常情況
useState 返回的 set 方法是更新狀態(tài)的關(guān)鍵。我們需要確保在適當?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
在這個例子中，當點擊按鈕時，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 鉤子只在組件首次渲染時運行一次（因為依賴數(shù)組為空 [] ）
- 在 useEffect 中， onWindowKeyDown 函數(shù)創(chuàng)建了一個閉包，它捕獲了當時的 count 值（即初始值1）
- 每次按下鍵盤時，調(diào)用的是這個閉包函數(shù)，它總是引用初始的 count 值（1）
- 因此，每次調(diào)用 setCount(count + 1) 實際上都是執(zhí)行 setCount(1 + 1) ，導致 count 永遠只會被設(shè)置為2
- 即使 state 更新導致組件重新渲染，由于 useEffect 的依賴數(shù)組為空，它不會再次運行，閉包中的 count 值也不會更新
如何解決這個問題，不要慌，經(jīng)過我不懈的研究，終于解決了，我們可以使用函數(shù)形式來更新狀態(tài)。這樣可以確保我們總是在最新的狀態(tài)基礎(chǔ)上進行更新。
示例代碼
const onWindowKeyDown = () => {
setCount(prevCount => prevCount + 1) // 使用函數(shù)形式
}
在這種形式下，setCount 接收一個函數(shù)作為參數(shù)，該函數(shù)的參數(shù)是當前的狀態(tài)值 prevCount，函數(shù)的返回值就是新的狀態(tài)值。這種方式可以保證獲取到的是最新的狀態(tài)值。
以上就是React中使用useState時狀態(tài)更新不生效的原因及解決方法的詳細內(nèi)容，更多關(guān)于React使用useState狀態(tài)更新不生效的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了淺談React碰到v-if,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時獲取到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react koa rematch 如何打造一套服務(wù)端渲染架子
這篇文章主要介紹了react koa rematch 如何打造一套服務(wù)端渲染架子，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要為大家介紹了Reactjs?錯誤邊界優(yōu)雅處理方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了基于react項目打包css引用路徑錯誤解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
其實react組件之間傳遞參數(shù)是比較簡單的,組件傳入?yún)?shù)的一種方式,下面這篇文章主要給大家介紹了關(guān)于React將組件作為參數(shù)進行傳遞的3種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學習 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了React Ant Design樹形表格的復雜增刪改操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
React?Hook中的useState函數(shù)的詳細解析
Hook 就是 JavaScript 函數(shù)，這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React?Hook?useState函數(shù)的詳細解析的相關(guān)資料,需要的朋友可以參考下2022-10-10
在 React 開發(fā)里,組件可分為受控組件和非受控組件,這篇文章將為大家介紹一下它們的實現(xiàn)原理,方法,區(qū)別,作用和應(yīng)用場景是什么,希望對大家有所幫助2025-03-03