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