React Hook useEffect has a missing dependency: 'ans.group._id'. Either include it or remov-CodePudding

I'm trying to create my project in React and Node. I'm using a useEffect hook inside a component. IN this useEssect, the frontend makes a request to the backend, to get some informations. Some of the information I pass to the call, cames from the drop drilling of the element. THe following warnings occur:

Line 20:8:  React Hook useEffect has a missing dependency: 'ans.group.id'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Here is the component code:

const GFiles = (ans) => {
    const g = useContext(PopupContestG);
    const v = useContext(PopupContest);
    const [file, setFile] = useState([])
    const act = ans.obj === 'h' ? v : g;
    useEffect(() => {
        let id = ans.group.id
        axios.post("http://127.0.0.1:5050/file/getfilesbygroup",{group:id})
        .then(res => {
            setFile(res.data);
        })
        .catch(err => console.log(err))
    }, [])

    return (<>
        <div className="gFiles">
         <h3 style={{'textAlign': 'left'}}>File list</h3>
            <div className="sidesaparator"></div>
            <div className="fileContainer">
            {file.map(f=>{
                return <SFile key={f._id} name={f.name} img={f.extension} ident={f._id} />
            })}  
             <button className="buttSendA" onClick={() => act.setPopup(1)}>ADD File</button>
             <Link to="/edit" className="buttSendA12">Enter Group Workspace</Link>
            </div>
        </div>
    </>)
}

In the empty array, used as second argument in the useEffect, VSCode puts a yellow line, so I don't know what is the problem. I tryied to figure out how to get rid of this problem, buut on stack overflow there are person that resolved declaring the variable inside useEffect. I tryied, but it did't make muck sense also to me, and didn't worked. Can someone help me fix that? Will it affects the code execution per se or is only something react says is better to do? Thanks

CodePudding user response：

Since your ans.group.id can be changed const act = ans.obj === 'h' ? v : g;, react will tell you that you need to include it in the dependency array. If you want to run this use effect only once, you can simply ignore this warning. If you want to rerun this useEffect every time ans.obj changes, include it in the array. To suppress it, add // eslint-disable-next-line react-hooks/exhaustive-deps above }, [])

    useEffect(() => {
        let id = ans.group.id
        axios.post("http://127.0.0.1:5050/file/getfilesbygroup",{group:id})
        .then(res => {
            setFile(res.data);
        })
        .catch(err => console.log(err))
    }, [ans.group.id]) //<-- Run this code first time and every time ans.group.id is changed

    useEffect(() => {
        let id = ans.group.id
        axios.post("http://127.0.0.1:5050/file/getfilesbygroup",{group:id})
        .then(res => {
            setFile(res.data);
        })
        .catch(err => console.log(err))
  // eslint-disable-next-line react-hooks/exhaustive-deps //<-- Ignore warning
    }, []) //<-- Run this only once, even if ans.group.id changed.