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

Question

我已将 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() 里面。我试过了，但它仍然给我同样的错误。 怎么办？

Answer 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 规则。

Answer 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 会尝试为您编写该依赖项，但现在您只需识别所有这些并手动添加它们。

Answer 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]);