时间戳

首页 > 解决方案 > 如何使用 setTimeout 在 if 条件内返回 JSX 元素

javascript - 如何使用 setTimeout 在 if 条件内返回 JSX 元素

问题描述

我正在尝试实现搜索功能，使用自定义挂钩，并从外部 API 检索数据。问题是当用户输入一个无效的搜索词时，它会立即返回 if 条件内的 JSX 元素。如何使用 setTimeout 延迟显示 JSX 元素，所以首先向用户显示微调器或其他东西，然后将它们重定向到上一页。这就是我所拥有的：

if (!movies[0])
    return (
        <>
            <Spinner />
            <h1>NO RESULTS FOUND</h1>
        </>
    );

这就是我理论上想做的事情：

if (!movies[0]) => show Spinner (for 200ms) => setTimeout(show error and redirect after 200ms, 200)

我怎么能在反应中实现这个？

标签： javascriptreactjs

解决方案

你也许可以尝试这样的事情：

const [loading, setLoading] = useState(true);

useEffect(() => {
  let timer = setTimeout(() => {
    setLoading(false);
  }, 2000);

  return () => { clearTimeout(timer) };
}, [];

return (
  <>
    {loading ? <div>Loading</div> : <div>...<div>}
  </>
);

推荐阅读