React Hook useEffect 缺少依赖项（没有在 useEffect 中移动函数）

Posted 2023-02-21

【中文标题】React Hook useEffect 缺少依赖项（没有在 useEffect 中移动函数）

【英文标题】：React Hook useEffect has missing dependencies (witout moving function inside useEffect)

【发布时间】：2020-04-05 02:23:49

【问题描述】：

这是我的部分代码。一切正常，但 eslint 出错。

React Hook useEffect 缺少依赖项：'dispatch' 和 'getData'。要么包含它们，要么移除依赖数组 react-hooks/exhaustive-deps

我找到了一些解决方案，但都说你需要在 useEffect 中移动函数，但我不能。因为我有时会调用 Jsx 中的 setData() 函数。

所以 getData 不仅在组件挂载时运行。

一些类似的问题，但正如我所说；我无法在 useEffect 中移动函数。答案总是一样的：

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

【问题讨论】：

您在axios.post 中使用的data 是否来自状态？

@AsafAviv 我更新了问题。

【参考方案1】：

React 创建者为 eslint 提供的新版本设置强制程序员将所有变量放入数组中。可以查看https://github.com/facebook/create-react-app/issues/6880#issuecomment-485912528