时间戳

首页 > 解决方案 > 如何在用户刷新页面时生成随机数

reactjs - 如何在用户刷新页面时生成随机数

问题描述

嗨，我正在使用 react 创建一个聊天机器人。我的代码是：

export default class App extends Component {
constructor(props) {
    super(props);
    this.state = {
     random : '',
    }
  }
  componentDidMount(){
    addResponseMessage('Welcome to React Bot! Type start');
     return this.setState({random :  Math.floor(Math.random()*10000)});
  }
   handleNewUserMessage = (newMessage) => {
     fetch('http://localhost:5005/webhooks/rest/webhook', {
            method: 'POST',
             headers : new Headers(),
             body:JSON.stringify({"sender":this.state.random, "message": newMessage}),
             }).then((res) => res.json())
             .then((data) => {
              var first = data[0];
              var mm= first.text;
              var i;
              console.log(mm)
              toggleMsgLoader();
              setTimeout(() => {
              toggleMsgLoader();
            if (data.length < 1) {
              addResponseMessage("I could not get....");
            }
           else{
               addResponceMessage(mm)
           }
        }
    }

  handleQuickButtonClicked = (e) => {
  addUserMessage(e);
   this.handleNewUserMessage(e);
    setQuickButtons([]);
  }
  render() {
    return (
      <Widget
        title="Rasa Sample Bot"
        subtitle="Asistente virtual"
        senderPlaceHolder="Type here ..."
        handleNewUserMessage={this.handleNewUserMessage}
        handleQuickButtonClicked={this.handleQuickButtonClicked}
        badge={1}
      />

    );
  }
}

当用户向我的机器人发送消息时，它将调用 handleNewUsermMessage() 并执行并向用户提供响应。 body:JSON.stringify({"sender":this.state.random, "message": newMessage}),此代码用于当用户刷新发件人 ID 将更改的页面时。但是这里每条消息都会创建一个随机 ID。我不想要每条消息。每当用户刷新页面时，我只想创建随机 id。

如何解决这个问题。请帮忙。提前致谢

标签： reactjsreact-nativereact-router

解决方案

当您刷新浏览器时，组件会重新安装。因此，要在刷新时生成随机数，您应该在componentDidMount()生命周期方法中调用随机数生成函数。下面的代码将起作用。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      random: null,
    }
  }

  min = 1;
  max = 100;

  generateRandom =()=>{
    this.setState({random: this.min + (Math.random() * (this.max 
     this.min))
  }});

  componentDidMount(){
    this.generateRandom();
  }

  handleClick = () => {
    this.generateRandom();
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        {this.state.random}
      </div>
    );
  }
}

推荐阅读