当useEffect道具改变时，React停止超时

Question

我正在构建和React应用程序，在那里我必须保存在线显示文档用户当前的页面，但是有一个问题，如果用户在整个文档中滚动，它会保存所有页面。所以我们想要使用某种计时器函数，它只会在道具页面在30秒内没有改变时触发。这是我的代码，它稍后调用，但仍然对通过滚动的所有页面。

useEffect(
async () => {
let timeout;
if (scriptInfo && authData && numPages) {
setTimeout(async () => {
const res = await postScriptAnalyticsData({
script_id: scriptInfo._id,
user_id: authData.user.user_id,
page: page,
full_page: numPages
});
}, 10000);
}
return () => {
clearTimeout(timeout);
};
},
[ scriptInfo, page, authData, numPages ]
);

Answer 1

您的useEffect()回调函数不应该是async。当一个值被返回时，useEffect钩子应该返回一个函数，但是如果你的回调是async，那么它将隐式返回一个Promise。从useEffect回调中删除async，因为这是不需要的，因为您没有在函数中直接使用await。另外，将timeout分配给setTimeout()的返回值，以便您可以清除它:

useEffect(() => { // can't be `async`, so remove it
let timeout;
if (scriptInfo && authData && numPages) {
timeout = setTimeout(async () => { // assign `timeout`
const res = await postScriptAnalyticsData({
script_id: scriptInfo._id,
user_id: authData.user.user_id,
page: page,
full_page: numPages
});
}, 10000);
}
return () => {
clearTimeout(timeout);
};
}, 
[scriptInfo, page, authData, numPages]
);

Answer 2

声明setTimeout()…如果没有使用钩子，则退出组件把它放在一个变量里例:

const timerCustom = setTimeout(...)

//组件useEffect (() =>{…clearTimeout (timerCustom);…})

，当你的页面道具发生变化时清除它