在使用react hook時(shí)候的一些問(wèn)題記錄
實(shí)際使用react hook的時(shí)候遇到的一些問(wèn)題記錄下來(lái)了，溫故而知新。
問(wèn)題1：useState已經(jīng)重新賦值了，但是拿到的還是之前的值
例子1：界面上有個(gè)按鈕，點(diǎn)擊按鈕界面上數(shù)值會(huì)增加1和2
const Test = () => {
const [arr, setArr] = useState([0]);
const handleClick = () => {
Promise.resolve()
.then(() => {
setArr([...arr, 1)];
}
.then(() => {
setArr([...arr, 2)];
}
}
return (
<div>
{arr.toString()}
<button onClick={handleClick}>按鈕</button>
</div>
)
}
但是實(shí)際的結(jié)果是：
點(diǎn)擊按鈕，界面展示的是 0,2。跟預(yù)期需要展示的0，1，2不一樣
例子2：點(diǎn)擊按鈕，執(zhí)行三次setState，希望加3
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
}
但是實(shí)際的結(jié)果是：
點(diǎn)擊按鈕，界面展示的是1。跟預(yù)期需要展示的3不一樣
原因
組件內(nèi)部的任何函數(shù)，包括事件處理函數(shù)和Effect，都是從它被創(chuàng)建的那次渲染中被看到的，所以引用的值都是舊的（沒(méi)找到原文出處，所以對(duì)“看到”這個(gè)詞表示疑惑），理解為：因?yàn)榻缑鏇](méi)有重新渲染，執(zhí)行的函數(shù)作用域還是舊的，所以里面值的引用還是之前的，所以即使多次執(zhí)行，拿到的都是舊值，會(huì)導(dǎo)致界面展示出現(xiàn)異常。
直接在handleClick里面打印count，展示的還是上一次的值，不是最新的值，這個(gè)由react的調(diào)度機(jī)制決定的。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-791600.html
修改建議：利用state hook參數(shù)可以是回調(diào)函數(shù)進(jìn)行解決;或者可以用ref，但是ref記錄值不太靈活，所以還是建議回調(diào)函數(shù)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-791600.html
setArr([...arr, 2)];
--------------變更成-------------
setArr((arr) => {
return [...arr, 2];
}
到了這里，關(guān)于react hook問(wèn)題記錄（持續(xù)更新）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
