反应死亡的白色屏幕，为什么注释掉这个代码修复它

Question

我正在制作一个简单的react应用程序，从api中获取琐碎的问题和答案，并将其显示为游戏。

我对这个应用程序的开发一直运行顺利，并按预期进行了更新，然而，当我导入一个解码函数以正确呈现琐事问题时，我注意到对代码的进一步编辑会导致一个空白的白色屏幕，在注释掉一些代码后，我设法隔离了似乎是什么代码导致了这个问题。

App.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>

你知道我做错了什么吗？react中没有显示错误消息，只是显示一个空白的白色屏幕。

Answer 1

空白的白色屏幕是由错误data.map is not a function引起的，这是由于您将data状态的默认值设置为空对象，而它应该是空数组(以便您可以映射(。

要修复此错误，只需将data的默认值设置为空数组即可。

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

代码沙盒：https://codesandbox.io/embed/inspiring-rhodes-gp5kki?fontsize=14&隐藏导航=1&主题=深色