Приложение ReactJs вылетает с ошибкой «Попробуйте добавить границы ошибок в свое дерево»

Question

Попытка построить приложение с произвольной цитатой с помощью React.Когда приложение загружается впервые при нажатии кнопки, оно генерирует случайную цитату.Но при втором щелчке приложения происходит сбой с сообщением «Произошла ошибка в компоненте приложения» «Попробуйте добавить границу ошибки в дерево для настройки поведения обработки ошибок.

class App extends React.Component {
  state = {
    quotes: null
  };
  componentDidMount() {
  fetch("https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json")
      .then(res => res.json())
      .then(data => {
        // console.log(data);
        this.setState({
          quotes: data.quotes
        });
      });
    // console.log(this.state.quotes);
  }
  randomQuoteHandler = () => {
    const randNumb = Math.floor(Math.random() * this.state.quotes.length);
    const randomQuote = this.state.quotes[randNumb];
    this.setState({
      quotes: randomQuote
    });
    console.log(this.state.quotes);
  };
  render() {
    return (
      <div>
        <button onClick={this.randomQuoteHandler}>gen</button>
        <p>{this.state.quotes !== null && this.state.quotes.quote}</p>
        <p> {this.state.quotes !== null && this.state.quotes.author}</p>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

randomQuoteHandler заменяет массив this.state.quotes выбранным quote, который является объектом.Поэтому при втором щелчке this.state.quotes.length не определено.

Вам нужно сохранить выбранную цитату в другой переменной состояния, например randomQuote.

class App extends React.Component {
  state = {
    quotes: null,
    randomQuote: null,
  }
  componentDidMount() {
    fetch(
      'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',
    )
      .then(res => res.json())
      .then(data => {
        // console.log(data);
        this.setState({
          quotes: data.quotes,
        })
      })
    // console.log(this.state.quotes);
  }
  randomQuoteHandler = () => {
    const randNumb = Math.floor(Math.random() * this.state.quotes.length)
    const randomQuote = this.state.quotes[randNumb]
    this.setState({
      randomQuote: randomQuote,
    })
    console.log(this.state.quotes)
  }
  render() {
    return (
      <div>
        <button onClick={this.randomQuoteHandler}>gen</button>
        <p>{this.state.randomQuote !== null && this.state.randomQuote.quote}</p>
        <p>{this.state.randomQuote !== null && this.state.randomQuote.author}</p>
      </div>
    )
  }
}

.

Answer 2

Проблема в том, что в randomQuoteHandler вы заменяете весь массив quotes случайным randomQuote объектом.log в конце этой функции randomQuoteHandler показывает это.

this.setState({
  quotes: randomQuote  // Array get replaced by one object
});

, поэтому во второй раз нет массива в состоянии для чтения this.state.quotes.quote