反应悬念不工作与useEffect/setTimeOut

Question

我在App文件中设置了这样的悬念

<Suspense fallback={<DelayedFallback />}>

然后我有一个useEffect/setTimeOut:

const DelayedFallback = () => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setTimeout(() => setLoaded(true), 5000);
}, []);
return <> {!loaded && <Loading />} </>;
};
export default DelayedFallback;

目的是客户希望访问网站的人观看他们的视频。

悬念不尊重这一点。

任何帮助将不胜感激!

Answer 1

如果您需要将组件的呈现延迟任意一段时间，您可以简单地执行以下操作:

const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsLoaded(true);
}, 5000);
});
if (!isLoaded) return <Loading />;
return <MyComponent />;

如果您正在使用<video>，则可以使用ended事件而不是setTimeout。

目前，Suspense仅用于延迟加载React组件。