使用 React 中的自訂 Hook 修復 UI 更新問題

識別 UI 更新問題

如果您一直在React 中使用狀態管理，您可能遇到過這種令人沮喪的情況：您的狀態正確更新（如React DevTools 或控制台日誌中所示），但您的UI 沒有反映這些更改。

我最近在使用 React 自訂鉤子時遇到了這個挑戰，我想分享一下我是如何解決它的。

下面的程式碼片段顯示了我正在使用的專案結構。

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

// LocationFilter.jsx

import useCustomHook from "./useCustomHook";

function LocationFilter() {
  const { location, handleLocationChange } = useCustomHook();

  const handleFilterByState = () => {
    handleLocationChange("state");
  };

  const handleFilterByCountry = () => {
    handleLocationChange("country");
  };

  return (
    <div>
      <button onClick={handleFilterByState}>View State Data</button>
      <button onClick={handleFilterByCountry}>View Country Data</button>
    </div>
  );
}

export default LocationFilter;

當使用者點擊按鈕查看特定州或國家範圍的資料時，我建立了一個自訂掛鉤來管理狀態變更。

在作為父元件的 App.jsx 中，呼叫自訂鉤子來存取資料狀態並將其作為 props 傳遞給 Table 元件（子元件）。

在LocationFilter元件中，我最初直接實例化自訂鉤子來存取位置和handleLocationChange狀態，其目的是根據「狀態」或「位置」過濾器來管理表中顯示的資料。 ”

但是，當我按一下「查看州資料」或「查看國家/地區資料」按鈕時，UI 中沒有任何變更。

我使用 React Developer Tools 檢查了 LocationFilter 元件內的位置狀態，我發現位置和資料狀態正在按預期更新為正確的值。但是，當我單擊按鈕時，UI 並未反映資料狀態的變更。

是什麼導致了我的 React 狀態管理問題？

？我最初的方法似乎合乎邏輯：我假設在每個元件中呼叫自訂掛鉤將允許每個元件存取和共享相同的狀態實例。

流程圖：提升狀態前

• 獨立鉤子實例：在 LocationFilter 中呼叫 useCustomHook 為該元件建立了一個單獨的鉤子狀態實例。每個元件都會維護自己的狀態，因此 LocationFilter 元件中的狀態更新不會影響 App 元件中的狀態。
• 狀態同步問題：點選按鈕不會更新App元件的狀態，導致父子元件不符。由於父元件的狀態保持不變，UI 不會反映子元件的更新，從而防止兩個元件中的重新渲染。

解決方案：提升狀態

React 不會同步元件之間的狀態，除非您透過 props 或 context 向下傳遞狀態。為了解決這個問題，我從 LocationFilter 元件中刪除了狀態鉤子調用，取得 App 元件中所需的狀態，並將其作為 props 傳遞給 LocationFilter 元件。這確保兩個元件共享相同的狀態，應用程式中的更改，同步兩個元件的資料。

流程圖：提升狀態後

這是 LocationFilter 和 App 的更新程式碼

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

結論

這段經歷加深了我對自訂鉤子的理解、將狀態提升到公共父組件的重要性以及 React 中狀態管理的最佳實踐，以確保同步、一致的 UI 更新。雖然自訂掛鉤允許您跨元件共用狀態邏輯，但它們不允許您共用狀態。

有關更詳細的信息，請參閱有關自訂 Hooks 和 Lifting State Up 的 React 文件。

以上是使用 React 中的自訂 Hook 修復 UI 更新問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！