一、問(wèn)題現(xiàn)象回顧

const [uploadLoading, setUploadLoading] = useState(false);

<Button loading={uploadLoading}>上傳文件</Button>

雖然你在控制臺(tái)通過(guò)useEffect確認(rèn)了uploadLoading的狀態(tài)確實(shí)發(fā)生了變化：

useEffect(() => {
  console.log('uploadLoading:', uploadLoading);
}, [uploadLoading]);

但是按鈕上的loading效果卻始終沒(méi)有更新。

二、常見(jiàn)排查思路與原因分析

1. 組件未重新渲染？

使用useState和useEffect時(shí)，只要狀態(tài)發(fā)生變化，React會(huì)自動(dòng)觸發(fā)組件的重新渲染。因此理論上來(lái)說(shuō)，組件應(yīng)該更新。如果你能看到useEffect中的打印，說(shuō)明狀態(tài)確實(shí)變了，也說(shuō)明組件至少執(zhí)行了一次渲染。

結(jié)論：不是組件不更新的問(wèn)題。

2. 狀態(tài)變量作用域或引用問(wèn)題？

有時(shí)候我們?cè)陂]包中使用狀態(tài)變量（比如在useCallback、useMemo中），如果沒(méi)有正確設(shè)置依賴項(xiàng)，可能會(huì)導(dǎo)致閉包中獲取到的是舊值。

例如：

const handleClick = useCallback(() => {
  console.log(uploadLoading); // 可能是舊值
}, []);

不過(guò)在這個(gè)問(wèn)題中，我們關(guān)注的是直接傳給按鈕的loading屬性，所以這個(gè)可能性較低。

3. Ant Design 的 Button/Upload 組件受控性問(wèn)題？

Ant Design 的 Button 和 Upload 組件對(duì) loading 屬性通常是“受控”的，也就是說(shuō)它們的行為完全取決于你傳入的 loading 值。只要你傳入的值正確，它就應(yīng)該正常工作。

結(jié)論：組件本身沒(méi)有問(wèn)題，關(guān)鍵在于傳入的值是否是最新的。

4. 父組件 props 沒(méi)有變化？

如果你使用的某個(gè)自定義 Hook（如 useMemeberTable）返回了 loading 狀態(tài)，而其內(nèi)部邏輯依賴于某些 props，那么如果這些 props 沒(méi)有變化，Hook 返回的狀態(tài)也可能不變。

這種情況需要檢查 Hook 的實(shí)現(xiàn)邏輯以及調(diào)用它的組件是否更新了 props。

5. React 18 的嚴(yán)格模式或并發(fā)特性？

React 18 引入了并發(fā)模式的一些新特性，比如過(guò)渡更新（transitions）、批處理等，有時(shí)會(huì)讓狀態(tài)更新看起來(lái)“延遲”了。

但如果你已經(jīng)通過(guò) useEffect 打印確認(rèn)了狀態(tài)變化，說(shuō)明狀態(tài)本身沒(méi)有問(wèn)題，只是 UI 沒(méi)有反映出來(lái)。

三、深入問(wèn)題核心：useMemo依賴項(xiàng)不全

const columns = useMemo(() => {
  return [
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <Button loading={uploadLoading}>上傳文件</Button>
      )
    }
  ];
}, [tab]); // 僅依賴 tab

這里的關(guān)鍵問(wèn)題是：columns 是通過(guò) useMemo 緩存生成的，而它的依賴數(shù)組只有 [tab]，并沒(méi)有包含 uploadLoading 和 fileLoading。

這意味著：

• 當(dāng) uploadLoading 發(fā)生變化時(shí)，columns 不會(huì)重新計(jì)算。
• 因此，render 函數(shù)中使用的仍然是最初創(chuàng)建時(shí)的 uploadLoading 值（即閉包中的舊值）。
• 這就導(dǎo)致按鈕的 loading 屬性始終為初始值，無(wú)法更新。

四、解決方案

要解決這個(gè)問(wèn)題，只需要將 uploadLoading 和 fileLoading 添加到 useMemo 的依賴數(shù)組中：

const columns = useMemo(() => {
  return [
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <Button loading={uploadLoading}>上傳文件</Button>
      )
    }
  ];
}, [tab, uploadLoading, fileLoading]); // 添加 missing dependencies

這樣，每當(dāng) uploadLoading 或 fileLoading 改變時(shí)，columns 會(huì)被重新生成，render 函數(shù)也會(huì)拿到最新的狀態(tài)值，從而正確更新按鈕的 loading 狀態(tài)。

五、知識(shí)擴(kuò)展：React 中的閉包陷阱與依賴管理

1. 閉包陷阱（Closure in Callbacks）

在 React 中，函數(shù)組件本質(zhì)上是一個(gè)閉包函數(shù)。當(dāng)你在 useCallback、useEffect 或 useMemo 中引用狀態(tài)變量時(shí)，如果不更新依賴項(xiàng)，就會(huì)導(dǎo)致函數(shù)體中使用的是舊的狀態(tài)值。

例如：

const [count, setCount] = useState(0);

const logCount = useCallback(() => {
  console.log(count);
}, []);

// 即使 count 更新，logCount 仍會(huì)輸出初始值 0

2. useMemo 的依賴管理

useMemo 用于緩存計(jì)算結(jié)果以提高性能，但它依賴的變量必須完整列出，否則會(huì)導(dǎo)致緩存值過(guò)期。

建議：

• 使用 ESLint 插件（如 eslint-plugin-react-hooks）來(lái)檢測(cè)依賴項(xiàng)是否完整。
• 對(duì)于復(fù)雜對(duì)象或數(shù)組，考慮使用 useDeepCompareMemo 來(lái)做深度比較。

3. Ant Design 組件的受控性

Ant Design 的大多數(shù)組件都支持受控模式，即其狀態(tài)完全由你傳入的 props 控制。因此，確保傳入的 props 是最新且正確的，是使用這些組件的關(guān)鍵。

六、總結(jié)

問(wèn)題本質(zhì)：

useMemo 的依賴項(xiàng)未包含所有影響其內(nèi)部邏輯的狀態(tài)變量（如 uploadLoading 和 fileLoading），導(dǎo)致閉包中獲取的是舊值，按鈕的 loading 狀態(tài)未更新。

解決方法：

將 uploadLoading 和 fileLoading 添加到 useMemo 的依賴數(shù)組中。

延伸學(xué)習(xí)：

• React 的閉包機(jī)制與依賴管理
• 如何正確使用 useMemo、useCallback
• Ant Design 組件的受控與非受控模式
• React 18 新特性與狀態(tài)更新機(jī)制

七、參考代碼修改示例

const columns = useMemo(() => {
  return [
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <>
          <Button loading={uploadLoading} onClick={() => setId(record.id)}>
            上傳文件
          </Button>
          <Button loading={fileLoading} onClick={() => fetchFile(record.id)}>
            下載文件
          </Button>
        </>
      )
    }
  ];
}, [tab, uploadLoading, fileLoading]);

以上就是React組件中按鈕的loading狀態(tài)失效問(wèn)題的解決方案的詳細(xì)內(nèi)容，更多關(guān)于React按鈕loading狀態(tài)失效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論