在 React 中使用效果函数说要导入，而它最终工作正常

Question

GitHub 中突出显示的代码

useEffect(() => {

  async function getTok() {

    await Gettestimon();

    alldoc.map(forget => console.log(forget.name));

    setcondi(true);

    // eslint-disable-next-line react-hooks/exhaustive-deps

  }

  getTok();

}, []);

每当我编译突出显示的代码时，它都会说我的函数gettestimon代表获取推荐，而不是其他东西，未在效果中导入，但最终它仍然可以工作。我想知道如何解决这个问题，但我在某处读到并补充道：

// eslint-disable-next-line react-hooks/exhaustive-deps

我怎样才能解决这个问题？

确切的错误是：

React Hook useEffect has a missing dependency: 'Gettestimon'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

Answer 1

如果您在内部使用外部函数/变量React.useEffect，则还需要将它们添加到其依赖项数组中。这样，React 才会知道React.useEffect仅当依赖项数组中指定的值发生更改时才运行。另外，您不需要使用 eslint 注释。虽然它在不将其添加到依赖项数组的情况下仍然可以工作，但由于过多不必要的重新渲染，它会降低组件的性能。你可以将其改进为这样的useEffect(() => {  async function getTok() {    await Gettestimon();    alldoc.map(forget => console.log(forget.name));    setcondi(true);  }  getTok();}, [Gettestimon]);

Answer 2

这是由于缺少依赖项造成的。每个渲染都会调用 useEffect 方法，第二个参数为空。但是，如果您需要useEffect函数仅在某些内容发生更改时执行，我们需要将该变量或对象添加到依赖项数组中。在使用 Effect 时，您使用了函数范围之外的外部对象，例如 alldoc 和 Gettestimon。如果您只想对这些对象更改alldoc和Gettestimo执行useEffect，则需要将其添加到依赖项数组中。否则，您将在每个渲染周期执行useEffect 。