代码编辑器崩溃

告诉我们发生了什么:
在此详细描述你的问题。
这个挑战写个嵌套循环,整个网站就崩了,刷新还读取本地代码,就 一直崩->刷新->崩,虽然我是故意的,但是不排除有真的不会这样写的

  **你目前的代码**

const inputStyle = {
width: 235,
margin: 5
};

class MagicEightBall extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    userInput: '',
    randomIndex: ''
  };
  this.ask = this.ask.bind(this);
  this.handleChange = this.handleChange.bind(this);
}
ask() {
  if (this.state.userInput) {
    this.setState({
      randomIndex: Math.floor(Math.random() * 20),
      userInput: ''
    });
  }
}
handleChange(event) {
  this.setState({
    userInput: event.target.value
  });
}
render() {
  const possibleAnswers = [
    'It is certain',
    'It is decidedly so',
    'Without a doubt',
    'Yes, definitely',
    'You may rely on it',
    'As I see it, yes',
    'Outlook good',
    'Yes',
    'Signs point to yes',
    'Reply hazy try again',
    'Ask again later',
    'Better not tell you now',
    'Cannot predict now',
    'Concentrate and ask again',
    "Don't count on it",
    'My reply is no',
    'My sources say no',
    'Most likely',
    'Outlook not so good',
    'Very doubtful'
  ];
  const answer = 'change me!'; // 修改这一行
  return (
    <div>
      <input
        type='text'
        value={this.state.userInput}
        onChange={this.handleChange}
        style={inputStyle}
      />
      <br />
      <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
      <br />
      <h3>Answer:</h3>
      <p>
        {/* 修改这行下面的代码 */}
<MagicEightBall />
        {/* 修改这行上面的代码 */}
      </p>
    </div>
  );
}
}
  **你的浏览器信息:**

用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

挑战: 在 React Render 方法中使用 JavaScript

挑战的链接:

const inputStyle = {
  width: 235,
  margin: 5
};

class MagicEightBall extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      randomIndex: ''
    };
    this.ask = this.ask.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  ask() {
    if (this.state.userInput) {
      this.setState({
        randomIndex: Math.floor(Math.random() * 20),
        userInput: ''
      });
    }
  }
  handleChange(event) {
    this.setState({
      userInput: event.target.value
    });
  }
  render() {
    const possibleAnswers = [
      'It is certain',
      'It is decidedly so',
      'Without a doubt',
      'Yes, definitely',
      'You may rely on it',
      'As I see it, yes',
      'Outlook good',
      'Yes',
      'Signs point to yes',
      'Reply hazy try again',
      'Ask again later',
      'Better not tell you now',
      'Cannot predict now',
      'Concentrate and ask again',
      "Don't count on it",
      'My reply is no',
      'My sources say no',
      'Most likely',
      'Outlook not so good',
      'Very doubtful'
    ];
     const answer = possibleAnswers[this.state.randomIndex];; // 修改这一行
    return (
      <div>
        <input
          type='text'
          value={this.state.userInput}
          onChange={this.handleChange}
          style={inputStyle}
        />
        <br />
        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
        <br />
        <h3>Answer:</h3>
        <p>
          {/* 修改这行下面的代码 */}
          {answer}
          {/* 修改这行上面的代码 */}
        </p>
      </div>
    );
  }
}

1 要生成 随机数 作为 randomIndex
const answer = possibleAnswers[this.state.randomIndex]

2 在模板中使用 answer 的值

 <h3>Answer:</h3>
        <p>
          {/* 修改这行下面的代码 */}
          {answer}
          {/* 修改这行上面的代码 */}
        </p>
      </div>