reactjs - React Hook useEffect has missing dependencies (witout moving function inside useEffect)

问题描述

This is my part of code. Everything works fine but eslint gives error.

React Hook useEffect has missing dependencies: 'dispatch' and 'getData'. Either include them or remove the dependency array react-hooks/exhaustive-deps

I found some solutions but all of say you need to move function inside the useEffect, but I can't. Because I'm calling setData() function sometimes that is in the Jsx.

So getData not only run when component mounted.

Some similar questions but as i said; I can't move function inside the useEffect. Answers always same:

React Hook useEffect has a missing dependency

React Hook useEffect has a missing dependency: 'list'

export const Complex = (props) => {
// [+] Olmayan başlık tespiti. [+] Var olan başlık tespiti. [-] Daha önce
// açılmış fakat ilk entrysi silinmiş başlıklar.
const params = queryString.parse(props.location.search)

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);

const data = {
    id: id,
    link: str,
    page: params.sayfa ? parseInt(params.sayfa) : 1,
    isGood: params.guzel ? params.guzel : false
};


// STATE
const [title,setTitle] = useState("")
const [titleSubs,setTitleSubs] = useState("")
const [entryCount,setEntryCount] = useState()
const [titleId,setTitleID] = useState()
const [exist,setExist] = useState(true)
const [entries,setEntries] = useState([])
const [likes,setLikes] = useState([])
const [disabled,setDisable] = useState(false)
const [isLoading,setLoading] = useState(false)

// REDUX
const titleModal = useSelector(state => state.settings.titleModal)
const dataPage = useSelector(state => state.pageInfo.page)
const entryNormal = useSelector(state => state.character.entry.entryNormal)
const entryCats = useSelector(state => state.character.entryCats)
const isAuthenticated = useSelector(state => state.auth.authenticated)
const dispatch = useDispatch();

function getData() {
    setLoading(true)
    // For everyone
    axios.post('/api/data/entry/get', data)
    .then(res  => {
            setExist(true)
            setTitleID(res.data.title.id)
            setEntries(res.data.entries)
            setEntryCount(res.data.count)
            setTitle(res.data.title)
            setTitleSubs(res.data.title.titlesubs)
            setLoading(false)

            if (titleModal) {
                // Send Redux Link Informations
                dispatch(setCurrentPage({type: null, id: null, title: null}))
            } else {
                dispatch(setCurrentPage({type: "entry", id: res.data.title.id, title: res.data.title.title}))
            }
    })
    .catch(err => {
        console.log(err)
        setExist(false)
        setLoading(false)
        setTitle(str)
    })

    // If Authenticated.
    // Get liked entries.
    if (isAuthenticated) {
        axios.post('api/data/entry/likes/get', {titleId: data.id})
        .then(res => {
            const LikesList = [];
            res.data.forEach(data => {
                LikesList.push(data.EntryId)
            });
            setLikes(LikesList)
        })
    }

}

useEffect(() => {
    getData()
    return () => {
        setEntries([])
        dispatch(setCurrentPage({type: null, id: null, title: null}))
    }
}, [id, props.location.search])

function getGoodEntriesGeneral() {
    const params = queryString.parse(props.location.search)
    params['guzel'] = true;
    const serialize = obj => Object.keys(obj)
                         .map(key => `${key}=${encodeURIComponent(obj[key])}`).join('&')
    history.push({
        pathname: props.location.pathname,
        search: serialize(params)
    })
}

标签： reactjsreact-hookseslint

reactjs - React Hook useEffect has missing dependencies (witout moving function inside useEffect)

问题描述

解决方案

推荐阅读