useEffect 中的 Eslint 详尽 deps 警告

Question

在下面组件的 useEffect 中，我遇到 ESLint exhaustive-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 数据，默认为“example”：

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

useEffect 中的 Eslint 详尽 deps 警告

Eslint exhaustive deps warning in useEffect

typescript

reactjs

eslint

use-effect