React Hook useEffect 缺少依赖项

Question

我正在开发一个 React JS 网站来辅助 TFserving

在我的文件home.js中，下面一行有错误

  useEffect(() => {
    if (!preview) {
      return;
    }
    setIsloading(true);
    sendFile();
  }, [preview]);

错误信息：-

React Hook useEffect has a missing dependency: 'sendFile'. Either include it or remove the dependency array.

Answer 1

它向您显示警告是因为您正在使用 sendFile() 方法并且您没有将它添加到 dependency array。所以你有两个选择。

1.) 将其添加到 dependency array

 useEffect(() => {
    if (!preview) {
      return;
    }
    setIsloading(true);
    sendFile();
  }, [preview, sendFile]);

2.) 使用eslint-disable-next-line 使用这个，就不会再显示警告了。

  useEffect(() => {
    if (!preview) {
      return;
    }
    setIsloading(true);
    sendFile();
    //eslint-disable-next-line
  }, [preview]);

Answer 2

如果您希望效果运行仅当预览发生变化时，将仅预览指定为依赖项数组在技术上是正确的。但是，React-hooks linting 规则无法区分这种情况。您可以专门针对该行禁用规则：

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

但更好的是使用 useCallback:

const sendFile= useCallback(() => {
  
}, [])

在这里，如果您的函数中有依赖项，则必须将它们包含在 useCallback 依赖项数组中，这将在函数参数更改时再次触发 useEffect。

Answer 3

  useEffect(() => {
    if (!preview) {
      return;
    }
    setIsloading(true);
    sendFile();
  }, `[preview, setIsloading, sendFile]`);

您忘记包含在 useEffect 挂钩中使用的函数必须位于依赖项数组中，因为它们是从挂钩外部使用的。 setState 函数不会随时间改变引用，因此它不会改变 useEffect 挂钩的行为

React Hook useEffect has a missing dependendency