React Hook useEffect缺少依赖项.为什么我在什么都没有坏的情况下会出现这个错误

Question

不确定是什么原因导致我出现这个React错误。我的应用程序可以工作，我的URL插件也可以工作，但是这个错误突然出现了，我不完全确定为什么？

Full Error:

Line 30:5:  React Hook useEffect has a missing dependency: 'slug'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

我所要做的就是将API数据传递到我的页面，用于呈现并使用slug创建URL参数

import React, { useState, useEffect } from 'react';
import axiosInstance from '../axios';
import { useParams } from 'react-router-dom';
//MaterialUI
import CssBaseline from '@material-ui/core/CssBaseline';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
}));
export default function Bucket() {
const { slug } = useParams();
const classes = useStyles();
const [data, setData] = useState({ bucket: [] });
useEffect(() => {
axiosInstance.get(slug).then((res) => {
setData({ bucket: res.data });
console.log(res.data);
});
}, [setData]);  //this is where the error is
return (
<Container component="main" maxWidth="md">
<CssBaseline />
<div className={classes.paper}></div>
<div className={classes.heroContent}>
<Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="textPrimary"
gutterBottom
>
{data.bucket.title}
</Typography>
<Typography
variant="h5"
align="center"
color="textSecondary"
paragraph
>
{data.bucket.about}
</Typography>
</Container>
</div>
</Container>
);
}

感谢您的调试帮助！

Answer 1

您只需将其添加到依赖数组中即可。我将进一步澄清slug需要是一个依赖项，因为如果useEffect发生更改，您希望它再次运行。

useEffect(() => {
axiosInstance.get(slug).then((res) => {
setData({ bucket: res.data });
console.log(res.data);
});
}, [setData, slug]);

Answer 2

除了效果之外，您没有在任何地方使用slug，只需将其移动到效果中即可消除此错误。

useEffect(() => {
axiosInstance.get(slug).then((res) => {
setData({ bucket: res.data });
console.log(res.data);
});
}, [slug,setData]);