在React中正确处理BFCache

Question

我在重定向到外部网址（支付提供商）之前显示一个加载屏幕（状态），因为它们需要一段时间才能加载。

如果用户选择不完成付款并返回（手势，后退按钮等），浏览器将从BFCache中重新拉取页面，包括加载状态，用户将永远“卡住”加载。

您建议如何处理？可以使用pageshow事件检测已持久化的加载，但我不确定这是否是处理此情况的react方式。

- Kimmax

Answer 1

持久加载应该手动处理。在您的情况下，您应该基于pageshow事件处理程序中的persisted属性来处理加载器状态。

- Jegatheesh Palanisamy

Answer 2

我曾经遇到过同样的问题，最终我使用了pageshow事件。

const [isLoading, setIsLoading] = useState<boolean>(false);
useEffect(() => {
    window.onpageshow = function(event) {
      if (event.persisted) {
        setIsLoading(false);
      }
    };
  }, []);

- Ihsan Fajar Ramadhan