Блог

Главная - Вопросы по программированию - Мой пользовательский интерфейс исчезает при достаточном количестве событий щелчка

Мой пользовательский интерфейс исчезает при достаточном количестве событий щелчка

#javascript #reactjs

#javascript #reactjs

Вопрос:

Мне удалось создать приложение React, которое возвращает новую цитату без повторения, но теперь пользовательский интерфейс исчезает при достаточном количестве событий нажатия. Почему мой код делает это? При этом в консоли я получаю сообщение об ошибке объекта.

 class QuoteMachine extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      quote: fullQuote,
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){ 
      let copy = this.props.quotes.slice();
      let index = Math.floor(Math.random() * copy.length);
    this.setState(function(prevState,props){
      if(prevState.quote != copy[index]){
        return {quote: copy[index]}
      }return {
        quote: copy[index 1]}
    })
  }

  render(){
const quote = this.state.quote[0];
const author = this.state.quote[1];
return (
  <div id='quote-box'>

    <div id='text'><h1> <div>{quote}</div> </h1></div>

    <div id='author'><h3> <div>{author}</div> </h3></div>

    <button onClick={this.handleClick} id='new-quote'>New Quote</button>
    <a id='tweet-quote' href="https://twitter.com/intent/tweet">Tweet Me</a>
  </div>
  )
} 
}
const QUOTES = [
["Stay Hungry. Stay Foolish.", "Steve Jobs"],
["Good Artists Copy, Great Artists Steal.", "Pablo Picasso"],
["Argue with idiots, and you become an idiot.", "Paul Graham"],
["Be yourself; everyone else is already taken.", "Oscar Wilde"],
["Simplicity is the ultimate sophistication.", "Leonardo Da Vinci"]
  ];
const fullQuote = QUOTES[Math.floor(Math.random() * QUOTES.length)]
ReactDOM.render(<QuoteMachine quotes={QUOTES} />, 
            document.getElementById('node'))

Комментарии:

1. Можете ли вы указать фактическую ошибку, которую вы получаете?

2. Конечно, в консоли регистрируется: [ошибка объекта] {}

Ответ №1:

Это потому, что ваш индекс отсутствует в массиве copy ?

Комментарии:

1. Извините, я не понимаю вашего вопроса. Можете ли вы уточнить?

2. давайте предположим, что copy.length равно 10, а затем let index = Math.floor(Math.random() * copy.length); . Здесь index может быть 9, а index 1 равно 10. так что copy[10] находится вне зоны действия.

3. О, вау, в этом есть большой смысл. Я продолжу работать над этим и дам вам знать.

4. Я думаю, вы попали прямо в точку. Запись в журнал консоли index показывает индекс вне диапазона copy.length .

5. index = Math.floor(Math.random() * copy.length?-1: 1);console.log(index) return { quote: copy[index]} }) тоже не помогает. Есть предложения?