Не удается получить один элемент из массива, хранящегося в состоянии React

Question

Перед тем как меня избили: «Я новичок в React!»

URL-адрес файла .json:

JSON ДЛЯ ПОЛУЧЕНИЯ ЦИТОВ

В моем приложении поддерживается состояние, в котором содержится массив кавычек и значение ключа внутри него.

constructor(props){
    super(props);
    this.state = {
        quotes: [],
        key: 0
    };
    this.handleClick= this.handleClick.bind(this)
}

Состояние обновляется при получении запроса к URL с помощью axios.

 componentDidMount() {
    const url = 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json';

    axios.get(url).then((res) =>{
        const items = (res.data.quotes)
        this.setState({quotes: items})
        console.log(this.state)
    }).catch(err => console.log(err))
}

Тогда я хочу пройти, получая только одну цитату каждый раз, когда нажимается кнопка. Для которого я представляю «DivElement», передавая конкретную цитату в качестве реквизита следующим образом:

render() {
    return (
        <div>
        <button onClick={this.handleClick}>
            Click Me
        </button>
        <DivElement
        currentquote = {this.state.quotes[this.state.key].quotes}
        />
        </div>
    );
}

Объявление "DivElement":

function DivElement(props){
console.log(props.currentquote)
return <p>{props.currentquote}</p>}

Это ошибка типа, которую я получаю:

TypeError: this.state.quotes[this.state.key] is undefined

Вещи, которые я пробовал:

Не работает Используйте метод JSON.parse для установки состояния.

Что я хочу сделать: отображать случайные кавычки на основе случайного ключа, сгенерированного методом onClick.

Answer 1

Ни один рендеринг не является асинхронным и не ожидает обратного вызова API.

---

вы должны условно визуализировать ваш компонент следующим образом:

 render() {
    return (
      this.state.quotes.length && ( <div>
          <button onClick={this.handleClick}>
            Click Me
          </button>
          <DivElement
            currentquote={this.state.quotes[this.state.key].quotes}
          />
      </div> )
    );
  }
}

Пожалуйста, дайте мне знать, если проблема не устранена,