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

Posted 2023-03-16

【中文标题】TypeError：无法读取未定义的属性（读取“问题”）

【英文标题】：TypeError: Cannot read properties of undefined (reading 'ques')

【发布时间】：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 并在此处提供输出？

【参考方案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;