[英]How to remove the “React Hook useEffect has missing dependencies” warning
Here is my component function:这是我的组件 function:
function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
setRosterList(rosterData);
}
useEffect(()=>{
getData();
console.log(Object.keys(rosterList));
},[]);
return(
<tr><td></td></tr>
);
}
export default RosterRows
It prompts the following warning message when the component is called:调用组件时会提示如下警告信息:
Line 14:7: React Hook useEffect has missing dependencies: 'getData' and 'rosterList'. Either include them or remove the dependency array react-hooks/exhaustive-deps
When I move the getData function into the useEffect function, it prompts:当我将getData function移动到useEffect function中时,提示:
React Hook useEffect has missing dependencies: 'props.rosterMonth', 'props.rosterYear', and 'rosterList'. Either include them or remove the dependency array react-hooks/exhaustive-deps
When I change function to the following:当我将 function 更改为以下内容时:
import { useEffect,useState} from 'react';
import Roster from '../../../utils/roster';
function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const rosterMonth=props.rosterMonth;
const rosterYear=props.rosterYear;
useEffect(()=>{
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(rosterYear,rosterMonth);
setRosterList(rosterData);
}
getData();
console.log(Object.keys(rosterList));
},[]);
return(
<tr><td></td></tr>
);
}
export default RosterRows
I got the following message:我收到以下消息:
React Hook useEffect has missing dependencies: 'rosterList', 'rosterMonth', and 'rosterYear'. Either include them or remove the dependency array react-hooks/exhaustive-deps
When the code is changed to the following:当代码更改为以下内容时:
function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const rosterMonth=props.rosterMonth;
const rosterYear=props.rosterYear;
useEffect(()=>{
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(rosterYear,rosterMonth);
setRosterList(rosterData);
console.log(rosterData);
}
getData();
},[]);
return(
<tr><td></td></tr>
);
}
export default RosterRows
It prompts the following message:它提示以下消息:
Line 5:12: 'rosterList' is assigned a value but never used no-unused-vars
Line 17:7: React Hook useEffect has missing dependencies: 'rosterMonth' and 'rosterYear'. Either include them or remove the dependency array react-hooks/exhaustive-deps
Would you tell me how to fix the problem?你能告诉我如何解决这个问题吗?
The problem is console.log(rosterList)
inside the effect.问题是
console.log(rosterList)
里面的效果。 getData
sets the rosterList
in the state but setting state is not synchronous in React. getData
在rosterList
中设置 rosterList 但在 React 中设置 state 不同步。
This will work as expected and doesn't have infinite loop and properly specifies the effect's dependencies:这将按预期工作并且没有无限循环并正确指定效果的依赖项:
function RosterRows(props) {
const [rosterList, setRosterList] = useState({});
useEffect(() => {
const getData = async () => {
let roster = new Roster();
let rosterData = await roster.get(props.rosterYear, props.rosterMonth);
console.log(Object.keys(rosterData));
setRosterList(rosterData);
};
getData();
}, [props.rosterYear, props.rosterMonth]);
return (
<tr>
<td></td>
</tr>
);
}
export default RosterRows;
If you ensure your useEffect hooks will just run once on component mount, you can just disable the eslint rule如果你确保你的 useEffect 钩子只会在组件挂载时运行一次,你可以禁用 eslint 规则
useEffect(()=>{
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(rosterYear,rosterMonth);
setRosterList(rosterData);
}
getData();
console.log(Object.keys(rosterList));
},[]); // eslint-disable-line
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.