如何抑制有效 useEffect 实例的 linting？答案

【问题标题】：How to suppress linting of valid useEffect instances?如何抑制有效 useEffect 实例的 linting？
【发布时间】：2020-03-18 19:26:44
【问题描述】：

这是有效的useEffect 代码：

  useEffect(() => {
    if (state.companyId !== undefined && state.companyId === -1) {
      return;
    }

    if (accessNotesRef.current) {
      accessNotesRef.current.focus();
    }

    if (vinRef.current) {
      vinRef.current.focus();
    }
  }, []);

在依赖方面，我非常刻意希望它在加载时只运行一次，因此[]。但是 linter 在抱怨：

React Hook useEffect 缺少依赖项：'emailRef'， “lastNameRef”和“state.companyId”。包括它们或删除依赖数组 react-hooks/exhaustive-deps

所以我们有一个误报案例。有没有办法抑制这种情况？

【问题讨论】：

大多数 linter 都有一种方法来抑制单个行的警告/错误。查看您正在使用的 linter 的文档。
你用什么 linter？这是一个非常具体的问题，不是一个通用的问题
@RaulRene：很抱歉！在 Mac 上的 VSCode 中，我使用 ESLint 和 FlowLanguageSupport。但是这些不是在我的终端会话中输出消息的，是吗？我曾假设这些消息来自npm start 使用的某个包。

标签： reactjs use-effect linter

【解决方案1】：

根据您的useEffect 逻辑，并根据您初始化state 的方式，您应该执行以下操作：

/*
Example for handling the on mount
initialization through props or `useState`
*/
const App = props => {
  const [state] = useState(DEFAULT_INITIAL);
  const companyRef = useRef(props.DEFAULT_INITIAL);
  const myRef = useRef();

  useEffect(() => {
    if (
      companyRef.current.companyId &&
      DEFAULT_INITIAL.companyId &&
      DEFAULT_INITIAL.companyId !== -1 &&
      myRef.current
    ) {
      myRef.current.focus();
    }
  }, []);

  return <></>;
};

这是因为检查您的“挂载状态”

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
}, [])

相当于在通过 props 初始化你的 state 时检查useState 的初始值或。

并且使用useRef 初始化的引用不需要在 dep 数组中，因为每个组件生命周期只有一次它们的实例。

请参考React FAQ:

从依赖列表中省略函数是否安全？ 一般来说，不会。

如果你 200% 确定 linter 是错误的，React 仍然建议你修复它。

如果你仍然喜欢它，你可以像这样禁用 lint：

useEffect(() => {
  if (state.companyId !== undefined && state.companyId === -1) {
    return;
  }
// eslint-disable-next-line
}, [])

【讨论】：

我很欣赏您使用 refs 删除依赖警告的巧妙方法，但我认为我的方法没有任何根本性的错误。这里的根本问题是 linter 给出了一个关于空依赖数组的误报警告。一个空的依赖数组应该对useEffect是完全有效的。
我在 react docs 中添加了一个常见问题解答，如果您对此非常确定，可以禁用它，我认为强烈不推荐这样做。