如何处理 eslint 缺少依赖项警告使用Reat Hooks 的影响

Question

我正在使用useEffect作为初始数据

export const ChannelConfig = (id) => {
const history = useHistory();
const dataUrl = "/channel/"+id;
useEffect(() => {
fetch(dataUrl + "/configure")
.then((resp) => {
if (resp.ok) {
return resp.json();
} else {
handleError(resp, "Server");
}
})
.then((data) => {
setSrcValue(data);
setEditValue(data);
})
}, []);
... ...
function handleError(resp, entity) {
resp.json().then((err) => {
customToast.error(resp.status, err, entity);
if (resp.status === 404) {
history.push("/pages/error-404")
}
});
}

我收到了这个警告

React Hook useEffect has missing dependencies: 'dataUrl' and 'handleError'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

我使用useEffect是错的吗？

此外，当我将"函数句柄错误"转换为"useCallback"时，我从eslint收到了有关"历史"的依赖项警告消息。

Answer 1

我使用"useRef"反应钩子，现在缺少依赖项警告消失了。 这使用正确吗？？

export const ChannelConfig = (id) => {
**const history = useRef(useHistory());**
const dataUrl = "/channel/"+id;
useEffect(() => {
fetch(dataUrl + "/configure")
.then((resp) => {
if (resp.ok) {
return resp.json();
} else {
handleError(resp, "Server");
}
})
.then((data) => {
setSrcValue(data);
setEditValue(data);
})
}, [dataUrl]);
... ...
const handleError = useCallback((resp, entity) => {
resp.json().then((err) => {
customToast.error(resp.status, err, entity);
if (resp.status === 404) {
**history.current.push("/pages/error-404")**
}
}, []);
}

Answer 2

缺少依赖项警告是为了通知用户避免意外关闭问题。

如果您绝对确定您正在编写的内容是正确的和有意的，则可以禁用警告

或

您可以选择通过将函数转换为使用 useCallback 然后将其添加为依赖项来绕过警告。请注意，该函数还使用从闭包提供给它的历史记录，因此 useCallback 也会警告您使用它。

您可以将历史记录添加到使用回调作为依赖项，因为它不会更改

export const ChannelConfig = (id) => {
const history = useHistory();
const dataUrl = "/channel/"+id;
...
const handleError = useCallback(function(resp, entity) {
resp.json().then((err) => {
customToast.error(resp.status, err, entity);
if (resp.status === 404) {
history.push("/pages/error-404")
}
});
}, [history]);
useEffect(() => {
fetch(dataUrl + "/configure")
.then((resp) => {
if (resp.ok) {
return resp.json();
} else {
handleError(resp, "Server");
}
})
.then((data) => {
setSrcValue(data);
setEditValue(data);
})
}, [handleError]);
... ...

请查看这篇文章以获取有关此问题的更多详细信息：如何使用useEffect React Hook时修复缺少依赖项警告？