React?hooks中useState踩坑之異步的問題
useState作為最常見的一個(gè)hook，在使用中總是會(huì)出現(xiàn)各種坑，最明顯的就是 useState 更新異步的問題。
比如我們把接口返回的數(shù)據(jù)，使用 useState 儲(chǔ)存起來，但是當(dāng)后面去改變這個(gè)數(shù)據(jù)的時(shí)候，每次拿到的都是上次的數(shù)據(jù)，無法實(shí)時(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 返回的更新對(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)文章
深入了解響應(yīng)式React Native Echarts組件
近年來，隨著移動(dòng)端對(duì)數(shù)據(jù)可視化的要求越來越高，通過 WebView 在移動(dòng)端使用 Echarts 這樣功能強(qiáng)大的前端數(shù)據(jù)可視化庫，是解決問題的好辦法。下面就和小編來一起學(xué)習(xí)一下吧2019-05-05
React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
react搭建在線編輯html的站點(diǎn)通過引入grapes實(shí)現(xiàn)在線拖拉拽編輯html
Grapes插件是一種用于Web開發(fā)的開源工具,可以幫助用戶快速創(chuàng)建動(dòng)態(tài)和交互式的網(wǎng)頁元素,它還支持多語言和多瀏覽器,適合開發(fā)響應(yīng)式網(wǎng)頁和移動(dòng)應(yīng)用程序,這篇文章主要介紹了react搭建在線編輯html的站點(diǎn)通過引入grapes實(shí)現(xiàn)在線拖拉拽編輯html,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異，其中命令式更加關(guān)注過程，而聲明式更加關(guān)注結(jié)果，對(duì)React渲染框架知識(shí)感興趣的朋友跟隨小編一起看看吧2022-06-06
React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫,使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗(yàn)證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了React中如何使用scss問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解
這篇文章主要為大家介紹了react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了React函數(shù)式組件的性能優(yōu)化思路詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
react寫一個(gè)select組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了react寫一個(gè)select組件的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07