React?hooks中useState踩坑之異步的問題
useState作為最常見的一個hook，在使用中總是會出現(xiàn)各種坑，最明顯的就是 useState 更新異步的問題。
比如我們把接口返回的數(shù)據(jù)，使用 useState 儲存起來，但是當(dāng)后面去改變這個數(shù)據(jù)的時候，每次拿到的都是上次的數(shù)據(jù)，無法實(shí)時更新。
或者我們在函數(shù)內(nèi)部使用 setState ，然后立即打印 state，打印的結(jié)果還是第一次的state 的值。
比如下面的代碼實(shí)例。
const [data, setData] = useState('111');
const handleTest = () => {
console.log(data) // 111
setName('222')
console.log(name) // 111
}
原因
useState 返回的更新對象的方法是異步的，要在下次重繪才能獲取新值，不要試圖在更改狀態(tài)之后立即獲取狀態(tài)。
useState 使用的兩種方式
我們知道，useState中的 [ ] 是一個解構(gòu)運(yùn)算，第一個是設(shè)置的值，第二個是用來改變 state 的方法。
直接傳入新值
const [data, setData] = useState(1) setData(data + 1)
傳入回調(diào)函數(shù) setState(callback)
const [data, setData] = useState(0) setData((prev) => prev + 1); // prev 是data 改變之前的值，return 返回的值會作為新狀態(tài)覆蓋data
一般情況下，我們使用第一種方式即可，但在某些特殊情況下，第一種方式獲取到的值不是最新設(shè)置的。
解決方案
使用 useRef
思路：
先使用 useRef 進(jìn)行存儲數(shù)據(jù)
再使用 useEffect 監(jiān)聽數(shù)據(jù)變化，并進(jìn)行更新。
import React, { useState, useEffect, useRef } from 'react';
const Index = () => {
const [info, setInfo] = useState()
const infoRef = useRef()
useEffect(() => {
infoRef.current = info
}, [info])
}
在之后需要使用 info 數(shù)據(jù)的地方只需要獲取 infoRef.current 即可獲取最新的 info 數(shù)據(jù)內(nèi)容。
使用回調(diào)函數(shù)更改數(shù)據(jù)
const [data, setData] = useState({a: 1})
setData((prev) => {
return {a: prev.a + 1}
})
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React/Redux應(yīng)用使用Async/Await的方法
本篇文章主要介紹了React/Redux應(yīng)用使用Async/Await的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
React使用useImperativeHandle自定義暴露給父組件的示例詳解
useImperativeHandle?是?React?提供的一個自定義?Hook,用于在函數(shù)組件中顯式地暴露給父組件特定實(shí)例的方法,本文將介紹?useImperativeHandle的基本用法、常見應(yīng)用場景,需要的可以參考下2024-03-03
React項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)持久化的方法大全
在React應(yīng)用開發(fā)中,數(shù)據(jù)持久化是一個至關(guān)重要的需求,當(dāng)用戶刷新頁面、關(guān)閉瀏覽器后重新打開應(yīng)用,或者在不同設(shè)備間切換時,我們希望能夠保持用戶的數(shù)據(jù)狀態(tài),本文將全面介紹React項(xiàng)目中實(shí)現(xiàn)數(shù)據(jù)持久化的各種方法,需要的朋友可以參考下2025-09-09
react中使用ant組件庫的modal彈窗報(bào)錯問題及解決
這篇文章主要介紹了react中使用ant組件庫的modal彈窗報(bào)錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
React中的setState使用細(xì)節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細(xì)節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進(jìn)行詳細(xì)的介紹，需要的朋友可以參考下2022-12-12
React項(xiàng)目中服務(wù)器端渲染SSR的實(shí)現(xiàn)與優(yōu)化詳解
在傳統(tǒng)的 React 項(xiàng)目里,頁面的渲染工作是在瀏覽器里完成的,而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串,再把這個 HTML 字符串發(fā)送給瀏覽器,下面我們就來看看具體實(shí)現(xiàn)方法吧2025-03-03
如何使用React的VideoPlayer構(gòu)建視頻播放器
本文介紹了如何使用React構(gòu)建一個基礎(chǔ)的視頻播放器組件,并探討了常見問題和易錯點(diǎn),通過組件化思想和合理管理狀態(tài),可以實(shí)現(xiàn)功能豐富且性能優(yōu)化的視頻播放器2025-01-01
React?hook實(shí)現(xiàn)簡單的websocket封裝方式
這篇文章主要介紹了React?hook實(shí)現(xiàn)簡單的websocket封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
react native實(shí)現(xiàn)監(jiān)控手勢上下拉動效果
這篇文章主要為大家詳細(xì)介紹了react native實(shí)現(xiàn)監(jiān)控手勢上下拉動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05