本文旨在解决在使用 React Router 的 `useParams` 钩子时，由于依赖项设置不当导致 `useEffect` 意外执行的问题。通过分析问题原因，并提供修改后的代码示例，帮助开发者避免此类错误，确保 `useEffect` 在预期的时间执行。
在使用 React Router 的 useParams 钩子时，你可能会遇到 useEffect 在不应该执行的时候执行，例如调整浏览器窗口大小。这通常是由于对 useParams 返回的对象作为依赖项处理不当造成的。本文将深入探讨这个问题，并提供有效的解决方案。
问题分析
useParams 钩子返回一个对象，其中包含了 URL 中的动态参数。 关键在于，每次组件渲染时，useParams 返回的都是一个新的对象引用。即使参数值没有发生变化，对象引用也会改变。
因此，如果你直接将 useParams 返回的整个 params 对象作为 useEffect 的依赖项，那么每次组件渲染（例如，由于窗口大小调整）都会触发 useEffect，因为 params 对象发生了变化（即使 params.id 的值没有变）。
解决方案：精确指定依赖项
解决这个问题的关键是只将 useEffect 真正依赖的参数值作为依赖项，而不是整个 params 对象。
解构 useParams 的返回值： 从 useParams 返回的对象中解构出你需要的参数值。
将解构后的参数值作为依赖项： 将解构后的参数值添加到 useEffect 的依赖项数组中。
以下是一个修改后的代码示例：
import { useParams } from "react-router-dom";
import { useEffect } from "react";
const MyComponent = () => {
const { id } = useParams(); // 解构 useParams 的返回值
useEffect(() => {
// 在这里执行你的副作用操作
console.log(`useEffect triggered with id: ${id}`);
// 例如：
// dispatch(addViewVideo({ _id: id }));
// dispatch(getVideo({ _id: id }));
}, [id]); // 只将 'id' 作为依赖项
return (
{/* 组件内容 */}
);
};
export default MyComponent;在这个例子中，我们首先使用 const { id } = useParams(); 解构了 useParams 的返回值，只提取了 id 参数。然后，我们将 id 作为 useEffect 的依赖项。 这样，useEffect 只会在 id 的值发生变化时才会执行，而不是在每次组件渲染时都执行。
补充说明：考虑其他依赖项
除了 id 之外，你的 useEffect 可能还依赖于其他变量。 确保将所有这些变量都添加到依赖项数组中。 在原始代码中，video 似乎也是一个依赖项。 如果 video 的值在组件的生命周期中会发生变化，那么也应该将其添加到依赖项数组中。
import { useParams } from "react-router-dom";
import { useEffect } from "react";
const MyComponent = () => {
const { id } = useParams();
const [video, setVideo] = useState(null); // 假设 video 是一个 state
useEffect(() => {
if (
(id && !video) ||
(!!id && !!video && id !== video?._id)
) {
console.log(`useEffect triggered with id: ${id} and video: ${video}`);
// dispatch(addViewVideo({ _id: id }));
// dispatch(getVideo({ _id: id }));
}
}, [id, video]); // 将 id 和 video 都作为依赖项
return (
{/* 组件内容 */}
);
};
export default MyComponent;总结
当使用 useParams 钩子时，要特别注意 useEffect 的依赖项。 不要直接将 useParams 返回的整个对象作为依赖项，而是应该解构出你需要的参数值，并将这些参数值作为依赖项。 此外，确保将所有其他 useEffect 依赖的变量都添加到依赖项数组中。 遵循这些原则可以帮助你避免 useEffect 意外执行，并确保你的代码按预期运行。
