React Hook useEffect 缺少依赖项：'location.state'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

Posted 2023-02-22

【中文标题】React Hook useEffect 缺少依赖项：\'location.state\'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

【英文标题】：React Hook useEffect has a missing dependency: 'location.state'. Either include it or remove the dependency array react-hooks/exhaustive-depsReact Hook useEffect 缺少依赖项：'location.state'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

【发布时间】：2021-10-31 20:46:40

【问题描述】：

我已将 id 作为状态一函数传递

 <Link 
    className="title"
    id="titles" 
    to=
         pathname: "/postDetail",
         state:  id:story.objectID                                 
       
   >
   story.title
</Link>

下面是子函数

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) => 
            const post = data;
            setPost(post);
            setLoading(false);
        );           
    

    getPost();
, []);

我不知道我做错了什么有人说要移动const id = location.state; 在 useEffect() 里面。我试过了，但它仍然给我同样的错误。 怎么办？

【参考方案1】：

是Eslint Rule，这个插件默认包含在create-react-app中

该规则强制您将渲染期间可能更改的任何变量放入您的依赖项，以防止 stale data 引用

你应该把 id 放到你的依赖中：

useEffect(() => 

    const link = `http://hn.algolia.com/api/v1/items/$id`

    const getPost = async () => 

        await fetch(link)
        .then((response) => response.json())
        .then((data) => 
            const post = data;
            setPost(post);
            setLoading(false);
        );           
    

    getPost();
, [id]);

或通过添加禁用它：// eslint-disable-next-line react-hooks/exhaustive-deps

但不建议禁用任何 eslint 规则。

【参考方案2】：

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) => 
            const post = data;
            setPost(post);
            setLoading(false);
        );           
    

    getPost();
, [id, setPost, setLoading]);

缺少的依赖是您在该函数之外使用的所有内容。

将来 React 会尝试为您编写该依赖项，但现在您只需识别所有这些并手动添加它们。

【参考方案3】：

试试这个：

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) => 
            const post = data;
            setPost(post);
            setLoading(false);
        );           
    

    getPost();
, [id]);