使用 React 中的自定义 Hook 修复 UI 更新问题-js教程-PHP中文网

识别 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 状态管理问题？

？我最初的方法似乎合乎逻辑：我假设在每个组件中调用自定义挂钩将允许每个组件访问和共享相同的状态实例。

流程图：提升状态之前

Fixing UI Update Issues with Custom Hooks in React

独立钩子实例：在 LocationFilter 中调用 useCustomHook 为该组件创建了一个单独的钩子状态实例。每个组件都会维护自己的状态，因此 LocationFilter 组件中的状态更新不会影响 App 组件中的状态。
状态同步问题：点击按钮不会更新App组件的状态，导致父子组件不匹配。由于父组件的状态保持不变，UI 不会反映子组件的更新，从而防止两个组件中的重新渲染。

解决方案：提升状态

React 不会同步组件之间的状态，除非您通过 props 或 context 向下传递状态。为了解决这个问题，我从 LocationFilter 组件中删除了状态钩子调用，获取 App 组件中所需的状态，并将其作为 props 传递给 LocationFilter 组件。这确保两个组件共享相同的状态，应用程序中的更改，同步两个组件的数据。

流程图：提升状态后

Fixing UI Update Issues with Custom Hooks in React

这是 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;