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

Question

出于某种原因，我无法访问结果数组中的“question”键。有人可以帮忙吗？这只是我已经开始的一个副业项目，为了让这第一个基本部分发挥作用，我已经费了好几个小时了。我现在只使用 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"
      ]
    }
  ]
}

谢谢!

Answer 1

这肯定会失败，因为您正在调用异步操作，但您的渲染明确依赖于它:

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

You are probably receiving Cannot read property 'question' of undefined

或

Cannot read 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}