React のカスタムフックに関する 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></locationfilter>
      <table data="{data}"></table>
    </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 では、カスタム フックが呼び出されてデータ状態にアクセスし、それをプロパティとして Table コンポーネント (子) に渡します。

LocationFilter コンポーネントでは、最初にカスタム フックを直接インスタンス化し、場所と handleLocationChange 状態にアクセスします。これは、「状態」または「場所」フィルターに従ってテーブルに表示されるデータを管理することを目的としていました。

ただし、[州データの表示] ボタンまたは [国データの表示] ボタンをクリックしても、UI に変化はありません。

React Developer Tools を使用して LocationFilter コンポーネント内の位置の状態をチェックしたところ、位置とデータの状態が予想どおりに正しい値で更新されていることがわかりました。ただし、ボタンをクリックしたとき、UI にはデータ状態の変更が反映されませんでした。

React 状態管理の問題の原因は何ですか?

?私の最初のアプローチは論理的であるように思えました。各コンポーネントでカスタム フックを呼び出すことで、各コンポーネントが同じ状態インスタンスにアクセスして共有できると考えました。

フローチャート: 状態を解除する前

• 独立したフック インスタンス: LocationFilter で useCustomHook を呼び出すと、そのコンポーネントのフック状態の別のインスタンスが作成されました。各コンポーネントは独自の状態を維持するため、LocationFilter コンポーネントの状態更新は App コンポーネントの状態に影響を与えません。
• 状態の同期の問題: ボタンをクリックしてもアプリ コンポーネントの状態が更新されず、親コンポーネントと子コンポーネントの間で不一致が発生します。親の状態は変更されないため、UI には子からの更新が反映されず、両方のコンポーネントでの再レンダリングが防止されます。

解決策: 状態を引き上げる

React は、props または context 経由で状態を渡さない限り、コンポーネント間で状態を同期しません。これを解決するために、LocationFilter コンポーネントから状態フック呼び出しを削除し、App コンポーネントで必要な状態を取得し、それを小道具として LocationFilter コンポーネントに渡しました。これにより、両方のコンポーネントが同じ状態、アプリ内の変更を共有し、両方のコンポーネントのデータを同期することが保証されます。

フローチャート: ステータスアップ後

LocationFilter とアプリの更新されたコードは次のとおりです

// 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></locationfilter>
      <table data="{data}"></table>
    </div>
  );
}

export default App;

結論

この経験により、カスタム フック、状態を共通の親コンポーネントに持ち上げることの重要性、同期された一貫した UI 更新を確実にするための React での状態管理のベスト プラクティスについての理解が深まりました。カスタム フックを使用すると、コンポーネント間で状態ロジックを共有できますが、状態を共有することはできません。

さらに詳しい情報については、カスタムフックとステートアップのリフティングに関する React ドキュメントを参照してください。

以上がReact のカスタムフックに関する UI 更新の問題を修正するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。