Question

我正试图在Action.js内调用动作的创建者，以使用setTimeout（）在3000毫秒后删除警报，并在消息末尾输出一个数字/计时器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>
  );
};

谢谢。

Answer 1

您应该像这样正确构造代码：

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

如果只是操作而没有为您生成任何值，请不要将所有内容都放在return语句下

强烈建议您阅读Robert C. Martin的书'Clean Code'

Answer 2

我希望这可以为您提供帮助：

尝试将组件中的问题分开，在这种情况下，渲染和设置超时：

您使用的是哪个版本的react？如果您的16.8更高 Hooks在每个渲染（包括第一个渲染）之后运行，因此：您可以尝试如下操作：

import React, { useEffect } from 'react';

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

  });

return (
  // Render your component
);

或者，如果您使用的是较低版本的react，则可以将您的组件转换为类组件，而不是在render方法中调用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
   );
  }
}

setTimeout（）输出一个非预期的数字/计时器

2 个答案: