在 useEffect 上使用方法时遇到困难，缺少依赖项和 useCallback 错误?

Question

这是我的代码：

const dfEventQuery = async (event: string) => {
const {
data: { result }
} = await axios.post("/api/df_event_query", { event, userId });
for (let msg of result.fulfillmentMessages) {
const botSay: MessageDataType = { speaks: "bot", msg };
setMessages(oldMessages => [...oldMessages, botSay]);
}
};
const resolveInXSeconds = (x: number) =>
new Promise(res => {
setTimeout(() => {
res(x);
}, x * 1000);
});
useEffect(() => {
dfEventQuery("Welcome");
if (inputRef.current) inputRef.current.focus();
const sendShopWelcome = async () => {
await resolveInXSeconds(1);
dfEventQuery("WELCOME_SHOP");
setShopWelcomeSent(true);
setShowChatbot(true);
};
if (window.location.pathname === "/shop" && !shopWelcomeSent) {
sendShopWelcome();
}
history.listen(() => {
if (history.location.pathname === "/shop" && !shopWelcomeSent) {
sendShopWelcome();
}
});
}, [shopWelcomeSent, history]);

我有这个错误：

React Hook useEffect缺少一个依赖项："dfEventQuery"。也 包含它或删除依赖项数组

但是当我将其添加到数组上时：[shopWelcomeSent，history，dfEventQuery]我收到此错误：

'dfEventQuery' 函数使 useEffect Hook 的依赖关系 (在第 201 行(每次渲染时都会更改。要解决此问题，请包装 'dfEventQuery' 定义成自己的 useCallback(( Hook

我已经坚持了几个小时，只是无法理解为什么这不起作用？

Answer 1

所以在这种情况下，将函数包装到useCallback中并在此处列出其所有依赖项会更容易：

const dfEventQuery = useCallback(async (event: string) => {
const {
data: { result }
} = await axios.post("/api/df_event_query", { event, userId });
for (let msg of result.fulfillmentMessages) {
const botSay: MessageDataType = { speaks: "bot", msg };
setMessages(oldMessages => [...oldMessages, botSay]);
}
}, [userId]);

并将其列入useEffect的依赖项中。

但老实说，我希望 Eslint 不会抱怨缺少依赖项，因为在您的代码中，它将在相关的渲染周期中重新创建，并且无论如何都不会发生"过时的闭包"问题。

[UPD] 在线程 https://github.com/facebook/react/issues/14920#issuecomment-467212561 中找到类似的情况，但如果这是预期的(以及为什么(，或者是否有这样的功能是合法的，则看不到任何评论。