Блог

Я пытаюсь реализовать функцию поиска, используя пользовательские перехваты и извлекая данные из внешнего API. Проблема в том, что когда пользователь вводит недопустимый поисковый запрос, он немедленно возвращает элемент JSX внутри условия if. Как я могу отложить показ элемента JSX с помощью setTimeout, поэтому сначала покажите пользователю счетчик или что-то в этом роде, а затем перенаправьте их на предыдущую страницу. Это то, что у меня есть:

 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?

Возможно, вы можете попробовать что-то вроде этого :

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

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

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

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