javascript - 尝试使用React检索API数据时出现问题

由于某种原因，我无法访问结果数组中的“问题”键。有人可以帮忙吗？这只是我已经开始的一个辅助项目，并且已经花了好几个小时试图将这第一部分基本内容付诸实践。我至今仅使用React和API已有大约一周的时间，而且我经验不足，所以可以提供任何帮助。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      questionList: []

    }
  }

  componentDidMount() {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(resp => resp.json())
      .then(resp => this.setState({ questionList: resp }))
  }

  render() {
    return (
      <div>{this.state.questionList.results[0].question}</div>

    )
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
)

这是API数据-

{
  "response_code": 0,
  "results": [
    {
      "category": "Entertainment: Film",
      "type": "multiple",
      "difficulty": "medium",
      "question": "Which of the following James Bond villains is not affiliated with the SPECTRE organization?",
      "correct_answer": "Auric Goldfinger",
      "incorrect_answers": [
        "Dr. Julius No",
        "Rosa Klebb",
        "Emilio Largo"
      ]
    },
    {
      "category": "Geography",
      "type": "multiple",
      "difficulty": "hard",
      "question": "The mountainous Khyber Pass connects which of the two following countries?",
      "correct_answer": "Afghanistan and Pakistan",
      "incorrect_answers": [
        "India and Nepal",
        "Pakistan and India",
        "Tajikistan and Kyrgyzstan"
      ]
    },
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "medium",
      "question": "In Team Fortress 2, which class wields a shotgun?",
      "correct_answer": "Everyone Listed",
      "incorrect_answers": [
        "Heavy",
        "Soldier",
        "Engineer"
      ]
    },
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "easy",
      "question": "Who is the leader of Team Mystic in Pokémon Go?",
      "correct_answer": "Blanche",
      "incorrect_answers": [
        "Candela",
        "Spark",
        "Willow"
      ]
    },
    {
      "category": "Science & Nature",
      "type": "multiple",
      "difficulty": "easy",
      "question": "The medical term for the belly button is which of the following?",
      "correct_answer": "Umbilicus",
      "incorrect_answers": [
        "Nevus",
        "Nares",
        "Paxillus"
      ]
    },
    {
      "category": "Entertainment: Cartoon & Animations",
      "type": "multiple",
      "difficulty": "easy",
      "question": "What is lost in Hawaiian and is also the name of a little girl in a 2002 film which features a alien named "Stitch"?",
      "correct_answer": "Lilo",
      "incorrect_answers": [
        "Lolo",
        "Lucy",
        "Lulu"
      ]
    },
    {
      "category": "Entertainment: Cartoon & Animations",
      "type": "multiple",
      "difficulty": "hard",
      "question": "In "Gravity Falls", what does Quentin Trembley do when he is driven out from the White House?",
      "correct_answer": "Eat a salamander and jump out the window.",
      "incorrect_answers": [
        "Leave in peace.",
        "Jump out the window.",
        "Release 1,000 captive salamanders into the white house."
      ]
    },
    {
      "category": "Entertainment: Television",
      "type": "multiple",
      "difficulty": "hard",
      "question": "Who was the winner of "Big Brother" Season 10?",
      "correct_answer": "Dan Gheesling",
      "incorrect_answers": [
        "Bryce Kranyik",
        "Ryan Sutfin",
        "Chris Mundorf"
      ]
    },
    {
      "category": "General Knowledge",
      "type": "multiple",
      "difficulty": "easy",
      "question": "Terry Gilliam was an animator that worked with which British comedy group?",
      "correct_answer": "Monty Python",
      "incorrect_answers": [
        "The Goodies‎",
        "The League of Gentlemen‎",
        "The Penny Dreadfuls"
      ]
    },
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "easy",
      "question": "In Counter-Strike: Global Offensive, what's the rarity of discontinued skins called?",
      "correct_answer": "Contraband",
      "incorrect_answers": [
        "Discontinued",
        "Diminshed",
        "Limited"
      ]
    }
  ]
}

谢谢！

最佳答案

这肯定会失败，因为您正在调用异步操作，但是渲染显式依赖于该操作：

{this.state.questionList.results[0].question}


  您可能正在收到Cannot read property 'question' of undefined


要么


  无法读取property '0' of undefined


最基本的解决方案是检查questionList内部是否确实有一些数据。

注意：数组中的questionList，而不是对象。

render() {
   if (this.state.questionList.length === 0) {
      return null;
   }

   return (
     <div>{this.state.questionList[0].results[0].question}</div>
   );
 }

但是，最好但最长的解决方案是逐步检查questionList具有正确的结构：

{this.state.questionList[0]
    && this.state.questionList.results
    && this.state.questionList.results[0]
    && this.state.questionList.results[0].question}

关于javascript - 尝试使用React检索API数据时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58922306/