反應白屏死機，為什么注釋掉這段代碼會修復它？

Question

我正在制作一個簡單的反應應用程序，以從 api 中獲取瑣事問題和答案，並將它們顯示為游戲。

我的這個應用程序的開發運行順利並且按預期更新，但是當我導入解碼 function 以使瑣事問題正確出現時，我注意到在注釋掉一些代碼后，進一步編輯代碼會導致空白屏幕代碼我已經設法隔離了似乎是什么代碼導致了這個問題。

應用程序.js

import React from 'react'
import Questions from './Questions'
import { nanoid } from 'nanoid'
import { decode } from 'he'

function App() {
  const [tempState, setTempState] = React.useState(false)
  const [data, setData] = React.useState({})

  React.useEffect(() => {
    fetch("https://opentdb.com/api.php?amount=5&category=9&difficulty=medium")
      .then(res => res.json())
      .then(info => setData(info.results.map(item => {
        return { 
          type: item.type, 
          question: item.question, 
          correct_answer: item.correct_answer, 
          incorrect_answers: item.incorrect_answers,
          id: nanoid() 
        }})))
  }, [])

  const questionElements = data.map(item => (
    <Questions 
      key={item.id}
      type={item.type}
      question={item.question}
      correct_answer={item.correct_answer}
      incorrect_answers={item.incorrect_answers}
    />
  ))
  
  return (
    <main>
      <img className="blob--top"
        src={require('./blobs.png')}
      />

      <img className="blob--bottom"
        src={require('./blobs1.png')}
      />

      {tempState ?
        <div className="quiz--container">
          <div>
             {questionElements}
          </div>
        </div> :
        <>
          <div className="title--container">
            <div className="title--init">
              <h2 className="title--header">Quizzical</h2>
              <h4 className="title--subheader">A battle of the brains</h4>
              <button className="game--start"
                onClick={() => setTempState(!tempState)}
              >
                Start quiz</button>
            </div>
          </div>
        </>
      }
    </main>
  );
}

export default App;

問題.js

import React from 'react'
import { decode } from 'he'

export default function Questions(props) {
    return(
        <div className="question--container">
            <h4>{decode(props.question)}</h4>
            <div className="question--items">
                <button>{decode(props.correct_answer)}</button>
                <button>{decode(props.incorrect_answers[0])}</button>
                <button>{decode(props.incorrect_answers[1])}</button>
                <button>{decode(props.incorrect_answers[2])}</button>
            </div>
        </div>
    )
}

在 App.js 中注釋掉以下兩個代碼部分可以解決錯誤

const questionElements = data.map(item => (
   <Questions 
      key={item.id}
      type={item.type}
      question={item.question}
      correct_answer={item.correct_answer}
      incorrect_answers={item.incorrect_answers}
   />
))

<div>
   {questionElements}
</div>

關於我做錯了什么的任何想法？ 反應中沒有顯示錯誤消息，它只是顯示一個空白的白色屏幕。

Answer 1

The blank white screen is caused by the error data.map is not a function , which is caused by your setting default value of the data state to be an empty object while it should be an empty array (so that you can map through).

要修復此錯誤，只需將data的默認值設置為空數組。

const [data, setData] = React.useState([])

代碼沙箱： https://codesandbox.io/embed/inspiring-rhodes-gp5kki?fontsize=14&hidenavigation=1&theme=dark