Résolution des problèmes de mise à jour de l'interface utilisateur avec des hooks personnalisés dans React

Identifier le problème de mise à jour de l'interface utilisateur

Si vous avez travaillé avec la gestion d'état dans React, vous avez probablement rencontré ce scénario frustrant : votre état se met à jour correctement (comme le montrent les React DevTools ou les journaux de la console), mais votre interface utilisateur ne reflète pas ces modifications.

J'ai récemment rencontré ce défi en travaillant avec un hook personnalisé React, et j'aimerais partager comment je l'ai résolu.

L'extrait de code ci-dessous montre la structure du projet avec laquelle je travaillais.

// 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;

J'ai créé un hook personnalisé pour gérer les changements d'état lorsque les utilisateurs cliquent sur le bouton pour afficher des données spécifiques à un état ou à l'échelle du pays.

Dans App.jsx, qui sert de composant parent, le hook personnalisé est appelé pour accéder à l'état des données et le transmet au composant Table (enfant) en tant qu'accessoires.

Dans le composant LocationFilter, j'ai initialement instancié le hook personnalisé directement pour accéder à l'emplacement et à l'état handleLocationChange, qui était destiné à gérer les données affichées dans le tableau selon un filtre « état » ou « emplacement ».

Cependant, lorsque je clique sur le bouton Afficher les données de l'état ou Afficher les données du pays, il n'y a aucun changement dans l'interface utilisateur.

J'ai vérifié l'état de l'emplacement à l'intérieur du composant LocationFilter à l'aide des outils de développement React et j'ai vu que l'état de l'emplacement et des données se mettait à jour comme prévu avec la valeur correcte. Cependant, l'interface utilisateur n'a pas reflété les modifications apportées à l'état des données lorsque j'ai cliqué sur le bouton.

Qu'est-ce qui a causé mes problèmes de gestion de l'état React ?

? Mon approche initiale semblait logique : j'ai supposé que l'appel du hook personnalisé dans chaque composant permettrait à chacun d'accéder et de partager la même instance d'état.

Organigramme : avant de lever l'état

• Instance de hook indépendante : l'appel de useCustomHook dans LocationFilter a créé une instance distincte de l'état du hook pour ce composant. Chaque composant conserve son propre état, donc les mises à jour d'état dans le composant LocationFilter n'affectent pas l'état dans le composant App.
• Problème de synchronisation d'état : Cliquer sur le bouton ne met pas à jour l'état du composant App, ce qui entraîne une incompatibilité entre les composants parent et enfant. Comme l'état du parent reste inchangé, l'interface utilisateur ne reflète pas les mises à jour de l'enfant, empêchant ainsi les nouveaux rendus dans les deux composants.

La solution : relever l’État

React ne synchronise pas l'état entre les composants, sauf si vous le transmettez via des accessoires ou un contexte. Pour résoudre ce problème, j'ai supprimé l'appel du hook d'état du composant LocationFilter, récupéré l'état nécessaire dans le composant App et l'ai transmis en tant qu'accessoires au composant LocationFilter. Cela garantit que les deux composants partagent le même état, les modifications dans l'application et la synchronisation des données des deux composants.

Organigramme : après la levée de l'état

Voici le code mis à jour pour LocationFilter et 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;

Conclusion

Cette expérience a renforcé ma compréhension des hooks personnalisés, de l'importance de faire passer l'état à un composant parent commun et des meilleures pratiques de gestion de l'état dans React, afin de garantir des mises à jour synchronisées et cohérentes de l'interface utilisateur. Bien que les hooks personnalisés vous permettent de partager la logique d'état entre les composants, ils ne vous permettent pas de partager l'état.

Pour des informations plus détaillées, reportez-vous à la documentation React sur les crochets personnalisés et l'état de levage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!