Я хочу показать ошибку в течение нескольких секунд, реагируя на 3 условия?

В настоящее время я изучаю React, и у меня есть ситуация, когда я хочу показать сообщение об ошибке в течение нескольких секунд, также должны быть выполнены три условия ниже.

Первый случай: Если сообщение пустое (что означает отсутствие ошибок). Отрегулируйте его в соответствии.

Второй случай: Если ошибка существует, она отобразит сообщение и скроется через 5 секунд.

Третий случай: Он выполняется каждый раз, когда message изменяется. Отрегулируйте по мере необходимости.

Пожалуйста, помогите мне в этом, чтобы понять это?

Это может помочь. В этой части документации рассказывается о рендеринге контента при определенных условиях. reactjs.org/docs/conditional-rendering.html

— 18.12.2022 14:40

javascript reactjs

18.12.2022 14:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ответ на ваши вопросы:

const [visible, setVisible] = useState(false)

useEffect(() => {
  // CASE 1 :message is empty (meaning no errors). Adjust as needed
  if (!message){
    setIsVisible(false)
    return
  }

  //CASE 2: error exists. Display the message and hide after 5 secs

  setIsVisible(true)
  const timer = setTimeout(() => {
     setIsVisible(false)
  }, 5000);
  return () => clearTimeout(timer);
}, [message]) // CASE 3 : executes every time `message` changes. Adjust as needed

Надеюсь, это будет соответствовать вашим требованиям.

Удачного кодирования !!

18.12.2022 14:40