开发答题Web应用时QuestionBox.js中map函数触发TypeError求助

嘿，这个错误我之前写组件时也踩过坑！问题根源很明确：你的answer状态初始值依赖于props传入的options，但**options可能没被正确传递给QuestionBox组件**，导致answer变成了undefined——而undefined根本没有map方法，自然就触发报错了。

给你几个实用的解决方案：

1. 给options设置默认空数组（最推荐） #

直接在组件的参数定义里给options加默认值，这样就算父组件忘了传这个props，answer也会初始化为空数组，不会触发错误：

import React, {useState} from "react";
// 这里给options加上默认值=[]
const QuestionBox = ({question, options = [], selected}) => {
 const [answer, setAnswer] = useState(options);
 return (
 <div className="questionBox">
 <div className="question">{question}</div>
 {answer.map((text, index) => (
 <button key={index} className="answerBtn" onClick={() => {
 setAnswer([text]);
 selected(text);
 }}
 >
 {text}
 </button>
 ))}
 </div>
 );
};
export default QuestionBox;

2. 在map前做存在性判断 #

如果不想用默认值，也可以在调用map之前先确认answer是否存在：

// 用ES6可选链操作符，更简洁
{answer?.map((text, index) => (
  // ...按钮代码
))}

要是需要兼容更旧的JavaScript环境，可以用这种写法：

{answer && answer.map((text, index) => (
  // ...按钮代码
))}

3. 检查父组件的props传递 #

最后别忘了去父组件里核对：是不是给QuestionBox传递了数组类型的options？比如父组件里应该是这样的：

<QuestionBox
  question="你的问题内容？"
  options=["选项A", "选项B", "选项C"] // 必须是数组，不能是undefined/null
  selected={(answer) => console.log("用户选择了：", answer)}
/>

这样处理之后，就不会再出现map调用在undefined上的错误啦！

内容的提问来源于stack exchange，提问作者Kazi Minhaj