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