如何使用setTimeout在if条件中返回JSX元素

Question

我正在尝试实现一个搜索功能，使用自定义挂钩，并从外部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)

我如何在react中实现这一点？

Answer 1

你可以试试这样的东西：

const [loading, setLoading] = useState(true);
useEffect(() => {
let timer = setTimeout(() => {
setLoading(false);
}, 2000);
return () => { clearTimeout(timer) };
}, [];
return (
<>
{loading ? <div>Loading</div> : <div>...<div>}
</>
);