React useEffect报缺少location.state依赖的错误该如何解决？

ESLint 的 react-hooks/exhaustive-deps 规则要求 useEffect 内部用到的所有外部变量都必须声明在依赖数组中，你当前的代码在 useEffect 里用到了从 location.state 解构出来的 id 变量，但是没有把它加入依赖数组，因此触发报错。
即使你把解构逻辑移到 useEffect 内部，依然用到了外部的 location 对象，所以还是会触发相同的依赖检查错误。

方案1：将id加入依赖数组（推荐） #

这是最符合 React Hooks 规范的解法，只有当id发生变化时才会重新触发接口请求，避免不必要的重复调用，同时要补充边界判断，避免用户直接访问路由没有携带state的情况导致报错：

const location = useLocation();
// 用可选链避免state为空时报错
const id = location.state?.id;

useEffect(() => {
    // id不存在时直接返回，也可补充跳转逻辑回到列表页
    if (!id) return;

    const link = `http://hn.algolia.com/api/v1/items/${id}`
    const getPost = async () => {
        try {
            const response = await fetch(link);
            const data = await response.json();
            setPost(data);
            setLoading(false);
        } catch (err) {
            // 可补充错误处理逻辑
            setLoading(false);
        }
    }
    getPost();
}, [id]); // 把用到的id加入依赖数组

方案2：显式忽略ESLint检查（仅适合确认id不会变化的场景） #

如果你能100%确认当前组件的id在生命周期内绝对不会发生变化，可以通过注释手动关闭当前行的依赖检查，属于兜底方案不推荐优先使用：

const location = useLocation();
const { id } = location.state;

useEffect(() => {
    const link = `http://hn.algolia.com/api/v1/items/${id}`
    const getPost = async () => {
        await fetch(link)
        .then((response) => response.json())
        .then((data) => {
            setPost(data);
            setLoading(false);
        });           
    }
    getPost();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

内容的提问来源于stack exchange，提问作者YASH KUMAR