React子組件調用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法
更新時間：2024年09月06日 09:22:31 作者：一條大河全靠浪
這篇文章主要介紹了React子組件調用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
出現(xiàn)問題的代碼如下：
const Parent: React.FC = () => {
const [val, setVal] = useState(0);
const onBtnsClick = () => {
console.log(val);
};
return (
<div>
{val}
<button onClick={() => setVal(val => val + 1)}>加一</button>
<Child onClick={onBtnsClick} />
</div>
);
};
const Child: React.FC<{ onClick: () => void }> = ({ onClick }) => {
// useCallback + 防抖
const onBtnClick = useCallback(
_.debounce(onClick, 1000, { leading: true, trailing: false }),
[]
);
return <button onClick={onBtnClick}>子組件</button>;
};
原因
父組件狀態(tài)的變更沒有引起該子組件中的onBtnClick重新生成，導致方法中的 val 為一開始傳入的數(shù)值0
解決方法
想辦法觸發(fā)組件刷新，使onBtnsClick 中打印的 val 永遠是最新的值
方法一、去掉 useCallback， 這樣每次父組件觸發(fā)刷新，就會刷新子組件
// 如果點擊的事件不會導致父組件刷新，從而刷新子組件
const onBtnClick = _.debounce(onClick, 1000, {
leading: true,
trailing: false,
});
但這種方式只適用于一種情況：點擊事件的處理不會導致父組件刷新；
如果父組件刷新，就會導致子組件刷新，從而 debounce 又新建，導致防抖無效。
如果想父組件刷新，子組件不刷新，可以父組件函數(shù)onBtnsClick用useCallback包裹，Child組件用memo包裹
完整代碼如下：
const Test: React.FC = () => {
const [val, setVal] = useState(0);
const onBtnsClick = useCallback(() => {
console.log(val);
setVal(val => val + 2)
}, [val]);
return (
<div>
{val}
<button onClick={() => setVal(val => val + 1)}>加一</button>
<div>
<Child onClick={onBtnsClick} />
);
};
const Child = memo(({ onClick }) => {
const onBtnClick = _.debounce(onClick, 1000, {
leading: true,
trailing: false,
});
return <button onClick={onBtnClick}>子組件</button>;
});
方法二、或者通過監(jiān)聽 val，val 值改變來刷新函數(shù)
const onBtnClick2 = useCallback(
_.debounce(onClick, 1000, { leading: true, trailing: false }),
[val]
);
方法三、在父組件中，把 val 作為 key 值，每次 val 變化強制觸發(fā)更新
這個改動是最小的
<Child key={val} onClick={onBtnsClick} />
// 或者
<div key={val}>
<Child onClick={onBtnsClick} />
</div>
到此這篇關于React子組件調用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法的文章就介紹到這了,更多相關React子組件調用父組件獲取數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄趓eact組件之間的參數(shù)傳遞(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近在寫項目的時候遇到了一個問題,當編輯完代碼后echarts圖正常展示 , 可再次刷新頁面 , echarts會消失,所以本文給大家介紹了react echarts刷新不顯示問題原因和解決方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了react表單數(shù)據(jù)形式配置化設計，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了React Hooks常用鉤子及基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
VSCode 配置React Native開發(fā)環(huán)境的方法
本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文主要介紹了React里的Fragment標簽的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
React Native 真機斷點調試+跨域資源加載出錯問題的解決方法
下面小編就為大家分享一篇React Native 真機斷點調試+跨域資源加載出錯問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了React數(shù)據(jù)傳遞之組件內部通信的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
關于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關于react-router/react-router-dom v4 history不能訪問問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。2018-01-01
React項目開發(fā)中函數(shù)組件與函數(shù)式編程關系
函數(shù)組件和函數(shù)式編程究竟是什么關系呢？本文會圍繞這個話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11