如何使用 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)

我怎么能在反應中實現這個？

Answer 1

你也許可以嘗試這樣的事情：

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

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

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

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