使用 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中文网其他相关文章！