如何在用户刷新页面的地方生成随机数答案

【问题标题】：How to generate random numbers where user refresh the page in react如何在用户刷新页面的地方生成随机数
【发布时间】：2019-12-06 10:12:39
【问题描述】：

您好，我正在使用 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。

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

【问题讨论】：

嗯，你可以在构造函数里面设置state.random。
谢谢@Ardweaden。它正在工作

标签： reactjs react-native react-router

【解决方案1】：

在你的州定义

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


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

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

【讨论】：

【解决方案2】：

尝试在 componentDidMount 中写入。

class Button extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          random : '',
        }
      }
    componentDidMount() {
      this.setState({random :  Math.floor(Math.random()*100)});
    }

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

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

【讨论】：

【解决方案3】：

当您刷新浏览器时，组件会重新挂载。因此，要在刷新时生成随机数，您应该在 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>
    );
  }
}

【讨论】：

【解决方案4】：

this.state = { random: Math.floor(Math.random()*100) }

只需在构造函数中更新上面的行，它就可以正常工作了

【讨论】：