关闭 eslint 警告/告诉编译器依赖项不会改变答案

【问题标题】：Turn off eslint warning / tell compiler that a dependency will not change关闭 eslint 警告/告诉编译器依赖项不会改变
【发布时间】：2020-10-28 00:26:30
【问题描述】：

我收到react-hooks/exhaustive-deps 警告。在我的示例中，我忘记了 user 依赖项，但我故意省略了 channel 依赖项（它只会在我重新加载页面时更改）。我知道我可以使用 eslint-disable-next-line（或类似的）来抑制警告，但我只想为 channel 执行此操作，而不是 user。

有什么办法吗？

App.js：

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

export const App = () => {
  const [user, setUser] = useState("Alice"); //may change in the UI
  const { channel } = useParams(); //will not change

  useEffect(() => {
    console.log("User", user);
    console.log("someExternalApi(channel)", channel);
    /* SomeExternalApi(user, channel); */

    //forgot 'user' dependency, but 'channel' will not change
  }, [user, channel]);

  return <p>Ahoj, przygodo!</p>;
};

index.js：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { App } from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route path="/:channel">
          <App />
        </Route>
      </Switch>
    </Router>
  </React.StrictMode>,
  rootElement
);

https://codesandbox.io/s/pedantic-cartwright-u8dq7

【问题讨论】：

如果它不会改变，你为什么要省略它？
它现在可能不会改变，但不能保证它永远不会改变。为了避免将来可能使用过时的值，您应该设计您的钩子，使其不依赖于您必须简单地 assert 不会改变的事情，而不是自信地告诉它（通过将channel 放入依赖项数组中）。这是一篇很有用的文章：overreacted.io/a-complete-guide-to-useeffect
是否可以将const { channel } = useParams(); 放入useEffect 挂钩中？
@DennisVash SomeExternalApi 实际上是一个相当复杂的业务逻辑，还有其他几个不同的回调，我需要在每个回调中添加“通道”依赖项，这似乎很难维护。
@M-N 不可能：React Hook "useParams" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)

标签： reactjs react-hooks eslint use-effect

【解决方案1】：

您可以使用来自useRef 的参考，而不是关闭linter不建议。

请注意，这是非常罕见的做法，您应该确切地知道自己在做什么，如果channel 不会改变，则不应忽略它。

export const App = () => {
  const [user, setUser] = useState("Alice"); //may change in the UI
  const { channel } = useParams();
  const channelRef = useRef(channel);

  useEffect(() => {
    console.log("User", user);
    console.log("someExternalApi(channel)", channelRef.current);
    SomeExternalApi(user, channelRef.current);
  }, [user]);

  return <p>Ahoj, przygodo!</p>;
};

【讨论】：