我收到react-hooks/exhaustive-deps警告。
在我的示例中，我忘记了 user 依赖性，但是我故意省略了 channel 依赖性（仅当我重新加载页面时，它才会更改）。我知道我可以使用eslint-disable-next-line（或类似命令）禁止显示警告，但是我只想对 channel 而不是对 user 这样做。 / p>
有什么办法吗？
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
);
您可以使用来自useRef的参考，而不是关闭不建议使用的短毛绒玩具（）。
请注意，这是非常不常见的做法，您应该确切地知道自己在做什么，如果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>;
};