快捷導(dǎo)航

React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法

更新時間：2024年09月06日 09:22:31 作者：一條大河全靠浪

這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

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重新生成，導(dǎo)致方法中的 val 為一開始傳入的數(shù)值0

解決方法

想辦法觸發(fā)組件刷新，使onBtnsClick 中打印的 val 永遠(yuǎn)是最新的值

方法一、去掉 useCallback，這樣每次父組件觸發(fā)刷新，就會刷新子組件

// 如果點擊的事件不會導(dǎo)致父組件刷新，從而刷新子組件
const onBtnClick = _.debounce(onClick, 1000, {
  leading: true,
  trailing: false,
});

但這種方式只適用于一種情況：點擊事件的處理不會導(dǎo)致父組件刷新；
如果父組件刷新，就會導(dǎo)致子組件刷新，從而 debounce 又新建，導(dǎo)致防抖無效。

如果想父組件刷新，子組件不刷新，可以父組件函數(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 變化強(qiáng)制觸發(fā)更新

這個改動是最小的

<Child key={val} onClick={onBtnsClick} />

// 或者
<div key={val}>
  <Child  onClick={onBtnsClick} />
</div>

到此這篇關(guān)于React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法的文章就介紹到這了,更多相關(guān)React子組件調(diào)用父組件獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: