TypeError：无法读取未定义的属性（读取“问题”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'ques')TypeError：无法读取未定义的属性（读取“问题”）
【发布时间】：2022-01-01 00:32:37
【问题描述】：

不断收到此错误TypeError: Cannot read properties of undefined (reading 'ques')

在 faq.ques 所在的 FAQ 文件中。如果我添加 faq.src.ques 然后错误转移到 src

一切都是正确的，但仍然无法弄清楚

任何解决方案？？？

常见问题解答文件

import FAQ from "./FAQ";

const FAQs = () => {
    const[faqs, setfaqs]= useState([
        {
            ques: 'question1',
            subtitle: "st1",
            answer: "answer1",
            open: true
        },
        {
            ques: 'question2',
            subtitle: "Pricing",
            answer: "answer2",
            open: false
        },
        {
            ques: 'question3',
            subtitle: "Pricing",
            answer: "question3",
            open: false
        },
    ]);
    
    const toggleFAQ = index => {
        setfaqs(faqs.map((faq, i) => {
            if(i === index) {
                faq.open = !faq.open;
            } else {
                faq.open = false;
            }
            return faq;
        }));
    }
    return (
    <>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-title">
                        <h1>FAQ</h1>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-content">
                        {faqs.map((faq, i) => {
                            <FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/>
                        })}
                    </div>
                </div>
            </div>
        </div>
    </>
    );
};
export default FAQs;

常见问题文件

function FAQ({faq, index, toggleFAQ}) {
    return (
    <>
        <div className="panel-group" id="accordion">
            <div className="panel panel-default">
                <h4 className="panel-title">
                    <div>{faq.ques}</div>
                </h4>
                    <a data-toggle="#collapse" data-parent="#accordion" onClick={()=>toggleFAQ(index)}>+</a>
            </div>  
            <div id="collapse" className={"panel-collapse in" + (faq.open ? " collapse" : " ")}>
                <div className="panel-body">
                   <h5>{faq.subtitle}</h5>
                   <p>{faq.answer}</p>
                </div>
            </div>
        </div>
    </>
    );
};

export default FAQ;

... .

.................................................. ..................................................... ..................................................... ..................................................... ......

【问题讨论】：

请在answer: "answer1 末尾添加"。语法高亮现在搞砸了
在编辑中而不是在实际代码中
您能否在FAQ 文件中控制台记录faq 并在此处提供输出？

标签： javascript reactjs dom-events jsx typeerror

【解决方案1】：

您将faq 传递为src 而不是faq。只需将其更改为：

<FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/>

【讨论】：

我也试过了，没有任何改变仍然是同样的错误
你试过记录faq是什么吗？

【解决方案2】：

您的代码存在多个问题。

报价问题
地图不返回
地图中缺少钥匙

请查找更新后的代码。

const FAQs = () => {
const [faqs, setfaqs] = useState([
    {
        ques: 'question1',
        subtitle: 'st1',
        answer: 'answer1',
        open: true,
    },
    {
        ques: 'question2',
        subtitle: 'Pricing',
        answer: 'answer2',
        open: false,
    },
    {
        ques: 'question3',
        subtitle: 'Pricing',
        answer: 'question3',
        open: false,
    },
]);

const toggleFAQ = (index) => {
    setfaqs(
        faqs.map((faq, i) => {
            if (i === index) {
                faq.open = !faq.open;
            } else {
                faq.open = false;
            }
            return faq;
        }),
    );
};
return (
    <>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-title">
                        <h1>FAQ</h1>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-12">
                    <div className="faq-content">
                        {faqs.map((faq, i) => {
                            return <FAQ faq={faq} index={i} key={i} toggleFAQ={toggleFAQ} />;
                        })}
                    </div>
                </div>
            </div>
        </div>
    </>
);

}; 导出默认常见问题解答；

对于常见问题解答文件

function FAQ({ faq, index, toggleFAQ }) {
    return (
        <>
            <div className="panel-group" id="accordion">
                <div className="panel panel-default">
                    <h4 className="panel-title">
                        <div>{faq.ques}</div>
                    </h4>
                    <a
                        data-parent="#accordion"
                        data-toggle="#collapse"
                        onClick={() => toggleFAQ(index)}
                    >
                        +
                    </a>
                </div>
                <div className={'panel-collapse in' + (faq.open ? ' collapse' : ' ')} id="collapse">
                    <div className="panel-body">
                        <h5>{faq.subtitle}</h5>
                        <p>{faq.answer}</p>
                    </div>
                </div>
            </div>
        </>
    );
}
export default FAQ;

【讨论】：