React Hook useEffect 缺少依赖项。 当没有任何东西损坏时，为什么我会收到此错误？

Question

not sure what is causing me to get this React error. My application works and my URL slugs are in affect and working, however this error is popping up and I'm not entirely sure why?

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

All I'm trying to do is pass API data to my page for rendering and creating a URL parameter with my slug

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>
    );
}

Thank you for the debugging help!

Answer 1

You just add it into the dependency array. I will further clarify that slug needs to be a dependency because you want the useEffect to run again if it changes.

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

Answer 2

You aren't using slug anywhere apart from the effect, simply move it into the effect to get rid of this error.

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