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

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

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

雖然你在控制臺通過useEffect確認了uploadLoading的狀態(tài)確實發(fā)生了變化：

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

但是按鈕上的loading效果卻始終沒有更新。

二、常見排查思路與原因分析

1. 組件未重新渲染？

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

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

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

有時候我們在閉包中使用狀態(tài)變量（比如在useCallback、useMemo中），如果沒有正確設(shè)置依賴項，可能會導致閉包中獲取到的是舊值。

例如：

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

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

3. Ant Design 的 Button/Upload 組件受控性問題？

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

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

4. 父組件 props 沒有變化？

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

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

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

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

但如果你已經(jīng)通過 useEffect 打印確認了狀態(tài)變化，說明狀態(tài)本身沒有問題，只是 UI 沒有反映出來。

三、深入問題核心：useMemo依賴項不全

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

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

這意味著：

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

四、解決方案

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

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

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

五、知識擴展：React 中的閉包陷阱與依賴管理

1. 閉包陷阱（Closure in Callbacks）

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

例如：

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

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

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

2. useMemo 的依賴管理

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

建議：

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

3. Ant Design 組件的受控性

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

六、總結(jié)

問題本質(zhì)：

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

解決方法：

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

延伸學習：

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

七、參考代碼修改示例

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)失效問題的解決方案的詳細內(nèi)容，更多關(guān)于React按鈕loading狀態(tài)失效的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論