当 useEffect 道具更改时反应停止超时

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); ... })

并在您的页面道具更改时清除它