React FAQ组件开发报TypeError: Cannot read 'ques' of undefined报错求解

报错根本原因 #

你在FAQs组件的faqs.map遍历中使用了带花括号的箭头函数，但没有显式return返回FAQ组件，导致遍历返回的是undefined数组，FAQ组件接收到的faq属性为undefined，自然无法读取ques属性。你之前尝试改为faq.src.ques是错误方向，你的数据源里没有src字段，不需要加这一层。

修复方案 #

1. 修正map的返回写法 #

两种修改方式二选一即可：

// 方案1：将花括号替换为圆括号，使用箭头函数隐式返回，同时补充循环渲染必填的key属性
{faqs.map((faq, i) => (
    <FAQ key={i} faq={faq} index={i} toggleFAQ={toggleFAQ}/>
))}

// 方案2：保留花括号，显式添加return语句
{faqs.map((faq, i) => {
    return <FAQ key={i} faq={faq} index={i} toggleFAQ={toggleFAQ}/>
})}

2. 优化状态更新逻辑（可选，避免后续渲染异常） #

你当前的toggleFAQ函数直接修改了原状态对象的open属性，不符合React状态不可变的规范，容易引发意外的渲染问题，修正为返回新对象：

const toggleFAQ = index => {
    setfaqs(faqs.map((faq, i) => {
        if(i === index) {
            return {...faq, open: !faq.open}
        } else {
            return {...faq, open: false}
        }
    }));
}

3. 添加属性访问兜底（可选，提升代码健壮性） #

在FAQ组件中访问faq的属性时添加可选链运算符，就算极端场景下faq为undefined也不会直接抛出阻断性报错：

<div>{faq?.ques}</div>
<h5>{faq?.subtitle}</h5>
<p>{faq?.answer}</p>
className={"panel-collapse in" + (faq?.open ? " collapse" : " ")}

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