[英]React Hook useEffect has a missing dependency: 'fetchData'
can anyone help me with this error?谁能帮我解决这个错误? In useEffect I call a function that makes a request and inserts the response in a redux state.
在useEffect 中,我调用了一个发出请求并将响应插入到 redux 状态的函数。
import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux'
import { actions } from './actions/actions'
import { I18nProvider } from './i18n'
import axios from 'axios'
import Home from './views/home/home';
import Page1 from './views/page1/page1';
import Page2 from './views/page2/page2'
import Page3 from './views/page3/page3'
const App = () => {
const [isLoading, setIsLoading] = useState(true)
const localeDefault = useSelector(state => state.audioGuideReducers.lang)
const dispatch = useDispatch()
const setDataRedux= (data) => dispatch(actions.setDataRedux(data))
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
await axios.get('https://link-api.com/alldata')
.then((response) => {
setDataRedux(response.data.data)
setIsLoading(false)
})
.catch( (error) => {
console.log(error.message);
})
}
return (
<I18nProvider locale={localeDefault}>
<Router>
{
isLoading ?
<h1> Loading... </h1>
:
<Switch>
<Route path="/page3/:id" component={Page3} />
<Route path="/page2" component={Page2} />
<Route path="/page1" component={Page1} />
<Route path="/" component={Home} />
</Switch>
}
</Router>
</I18nProvider>
);
}
export default App
Although the application is "running", I would like to resolve the following warning that appears: " React Hook useEffect has a missing dependency: 'fetchData'. Include it or remove the dependency matrix react-hooks/exaustive-deps "尽管应用程序正在“运行”,但我想解决出现的以下警告:“ React Hook useEffect 缺少依赖项:'fetchData'。包括它或删除依赖项矩阵 react-hooks/exaustive-deps ”
Pass fetchData
as an argument to useEffect
将
fetchData
作为参数传递给useEffect
useEffect(() => {
fetchData();
}, [fetchData]);
Its because whenever you are using useEffect
and if you use something that is outside from useEffect.这是因为每当您使用
useEffect
以及使用useEffect
之外的东西时。 UseEffect need to make sure when to update when not that's why you need to pass it in its dependency: UseEffect 需要确保何时更新,这就是为什么您需要在其依赖项中传递它:
useEffect(() => {
fetchData();
}, [fetchData]);
const fetchData = async () => {
await axios.get('https://link-api.com/alldata')
.then((response) => {
setDataRedux(response.data.data)
setIsLoading(false)
})
.catch( (error) => {
console.log(error.message);
})
}
Better way if you need only inside useEffect
put fetchData
inside useEffect
:如果你只需要在
useEffect
里面把fetchData
放在fetchData
里面, useEffect
更好的方法是:
const setDataRedux = React.useCallback((data) => dispatch(actions.setDataRedux(data)), [])
useEffect(() => {
const fetchData = async () => {
await axios.get('https://link-api.com/alldata')
.then((response) => {
setDataRedux(response.data.data)
setIsLoading(false)
})
.catch( (error) => {
console.log(error.message);
})
}
fetchData();
}, [setDataRedux]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.