React中map遍历数组生成的Question组件点击按钮后无法渲染

题目无法正常渲染的核心原因是JSX语法错误：
三元运算符的题目页分支中，你给questionElements额外包裹了一层大括号，等价于向React返回了一个普通JS对象{ questionElements: [组件数组] }，React不支持直接渲染原生对象，因此组件无法正常挂载。
另外你的Question组件中JSX标签存在多余空格（如< /div>、< h1 >），属于不规范写法，可能触发编译异常。

• 修正App组件return中的三元表达式，去掉题目页分支外层多余的大括号，直接返回合法的JSX结构
• 清理Question组件中JSX标签的多余空格，规范标签写法
• （可选）增加接口加载状态判断，避免异步拉取题目未完成时切页出现短暂空白
• （可选）给列表渲染的Question组件增加唯一key属性，消除React控制台警告

// App组件
const [start, setStart] = React.useState(true)
const [request, setRequest] = React.useState([])
// 可选加载状态
const [loading, setLoading] = React.useState(false)

function renderNextPage() {
  setStart(false)
}

React.useEffect(() => {
  setLoading(true)
  fetch('https://opentdb.com/api.php?amount=5')
    .then(res => res.json())
    .then(data => {
      setRequest(data.results.map(({
        question,
        correct_answer,
        incorrect_answers
      }) => ({
        question,
        correct_answer,
        incorrect_answers
      })))
      setLoading(false)
    })
}, [])

const questionElements = request.map((req, index) => {
  return <Question key={index} question={req.question} />
})

return (
  start ? 
    <Start handleClick={renderNextPage} /> : 
    <div className="question-container">
      {loading ? <p>题目加载中...</p> : questionElements}
    </div>
)
}

// Question组件
export default function Question(props) {
  return (
    <div>
      <h1>{props.question}</h1>
    </div>
  )
}

• 原错误写法: {questionElements}改为返回合法JSX结构，不再返回React无法识别的对象类型
• 清理了所有JSX标签尖括号和标签名之间的多余空格
• 列表渲染增加key属性，符合React渲染规范
• 新增加载状态避免网络较慢时切页出现空白

内容的提问来源于stack exchange，提问作者Abdullahi Olateju