React Hook useEffect 缺少依賴項（在 useEffect 中沒有移動函數）

Question

這是我的代碼部分。 一切正常，但 eslint 出錯。

React Hook useEffect 缺少依賴項：“dispatch”和“getData”。 包括它們或刪除依賴數組 react-hooks/exhaustive-deps

我找到了一些解決方案，但都說你需要在 useEffect 中移動函數，但我不能。 因為我有時在 Jsx 中調用 setData() 函數。

因此 getData 不僅在組件安裝時運行。

一些類似的問題，但正如我所說； 我無法在 useEffect 中移動函數。 答案總是一樣的：

React Hook useEffect 缺少依賴項

React Hook useEffect 缺少依賴項：'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)
    })
}

Answer 1

React 創建者提供的新版 eslint 設置強制程序員將所有變量放入數組中。 您可以查看https://github.com/facebook/create-react-app/issues/6880#issuecomment-485912528