setTimeout () выводит непредвиденный номер / таймер - PullRequest
0 голосов
/ 04 июля 2019

Я пытаюсь вызвать создателя действия внутри моего Action.js для удаления предупреждения через 3000 мс с помощью setTimeout (), и в конце сообщения выводится число / таймер 61.

Как мне удалить это 61.

Вывод:

Password too short (min 6 characs.)61

Код:

const Alert = props => {
  return (
    <div>
      {props.alert && (
        <div className={`alert alert-${props.alert.type}`}>
          <i className="fas fa-info-circle"> {props.alert.msg}</i>
          {setTimeout(() => props.removeAlert(), 3000)}
        </div>
      )}
    </div>
  );
};

Спасибо.

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Я надеюсь, что это может помочь вам:

Попробуйте разделить проблемы в вашем компоненте, в данном случае рендер и установленное время ожидания:

Какую версию реакции вы используете?Если у вас выше, чем 16.8 Hooks, запускайте после каждого рендера, включая первый, так: вы можете попробовать что-то вроде этого:

import React, { useEffect } from 'react';

useEffect(() => {
    // Run your setTimeout here!!!

  });

return (
  // Render your component
);

Или, если вы используете более низкую версию реакции, вы можетепреобразуйте ваш компонент в компонент класса и вместо вызова setTimeout в методе рендеринга используйте его в componentDidMount()

class Alert extends React.Component { 
  constructor(props){
    super(props)
  }

  componentDidMount() {
    setTimeout(() => this.props.removeAlert(), 3000)
  }

  render() {
    return (
     // Set your conditions &&
     // Render your message or component
   );
  }
}

0 голосов
/ 04 июля 2019

Вы должны правильно структурировать свой код следующим образом:

const setAlert = props => 
{ 
  if(props.alert){
    setTimeout(() => props.removeAlert(), 3000)
    return (props.alert.msg); 
  }
};

Не помещайте все в оператор return, если это просто действие и не генерирует для вас никакого значения

IНастоятельно рекомендуем прочитать книгу Роберта С. Мартина «Чистый код»

...