Eslint详尽的deps警告正在使用效果

Question

在下面组件的useEffect中，我面临ESLint详尽的deps警告：

ESlint告诉我，我需要包含selectedJar作为依赖项，但当我这样做时，图表加载很快，然后它们都消失了。

我可以继续我的开发，因为一切都正常，但根据ESlint的消息，我认为我做错了什么。

有人能告诉我这个代码的实际外观吗？

const Stats: Page = () => {
const [selectedJar, setSelectedJar] = useState("example"); 
const [jarData, setJarData] = useState<JarChartData>({} as JarChartData);
const router = useRouter();
const jar: string = typeof(router.query.jar) === "string" ? router.query.jar : "";

useEffect(() => {
const getData = async (): Promise<void> => {
setSelectedJar(jar);
const jarData: JarChartData = await getJarData(selectedJar);
setJarData(jarData);
}
getData();
}, [jar]);
return (
<>
something dope
</>
)

Answer 1

这里有一个潜在的错误，即在同一调用中调用setSelectedJar，然后使用selectedJar。这不太可能达到你想要的效果；selectedJar在下一次渲染之前不保证具有更新的值。

读取您的逻辑，看起来您希望获取的值始终来自路由器，但如果路由器中没有值，则默认为"example"；如果是这种情况，则不需要useState。只要router中的值发生变化，您就可以获取jar数据，默认值为"0"；例如"：

const router = useRouter();
const [jarData, setJarData] = useState<JarChartData>({} as JarChartData);
const jar: string = typeof(router.query.jar) === "string" ? router.query.jar : "example";
useEffect(() => {
getJarData(jar).then(data => setJarData(data));
}, [jar, setJarData]);