#javascript #reactjs #dom-events #jsx #typeerror
Вопрос:
Продолжайте получать эту ошибку TypeError: Не удается прочитать свойства неопределенного (чтение «вопросов»)
в файле часто задаваемых вопросов, где часто задаваемые вопросы.вопрос в том. если я добавлю faq.src.ques, то ошибка перейдет в src
все правильно соответственно, но все еще не могу понять это
есть какое-нибудь решение???
Файл часто задаваемых вопросов
import FAQ from "./FAQ"; const FAQs = () =gt; { 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 =gt; { setfaqs(faqs.map((faq, i) =gt; { if(i === index) { faq.open = !faq.open; } else { faq.open = false; } return faq; })); } return ( lt;gt; lt;div className="container"gt; lt;div className="row"gt; lt;div className="col-md-12"gt; lt;div className="faq-title"gt; lt;h1gt;FAQlt;/h1gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div className="row"gt; lt;div className="col-md-12"gt; lt;div className="faq-content"gt; {faqs.map((faq, i) =gt; { lt;FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/gt; })} lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/gt; ); }; export default FAQs;
Файл часто задаваемых вопросов
function FAQ({faq, index, toggleFAQ}) { return ( lt;gt; lt;div className="panel-group" id="accordion"gt; lt;div className="panel panel-default"gt; lt;h4 className="panel-title"gt; lt;divgt;{faq.ques}lt;/divgt; lt;/h4gt; lt;a data-toggle="#collapse" data-parent="#accordion" onClick={()=gt;toggleFAQ(index)}gt; lt;/agt; lt;/divgt; lt;div id="collapse" className={"panel-collapse in" (faq.open ? " collapse" : " ")}gt; lt;div className="panel-body"gt; lt;h5gt;{faq.subtitle}lt;/h5gt; lt;pgt;{faq.answer}lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/gt; ); }; export default FAQ;
… .
…………………………………………………………………………………………………………………………………………………………………………………..
Комментарии:
1. Пожалуйста, добавьте a
"
в концеanswer: "answer1
. Подсветка синтаксиса теперь испорчена2. это было в правках, а не в реальном коде
3. Можете ли вы консольно войти
faq
вFAQ
файл и предоставить вывод здесь?
Ответ №1:
Ты проходишь faq
как src
и не как faq
. Просто измените его на:
lt;FAQ faq={faq} index={i} toggleFAQ={toggleFAQ}/gt;
Комментарии:
1. Я тоже попробовал это, ничего не изменилось, все та же ошибка
2. вы пробовали регистрировать, что
faq
это такое?
Ответ №2:
С вашим кодом существует множество проблем.
- Проблема с котировками
- Возврата на карте нет
- ключ отсутствует на карте
Пожалуйста, найдите обновленный код.
const FAQs = () =gt; { 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) =gt; { setfaqs( faqs.map((faq, i) =gt; { if (i === index) { faq.open = !faq.open; } else { faq.open = false; } return faq; }), ); }; return ( lt;gt; lt;div className="container"gt; lt;div className="row"gt; lt;div className="col-md-12"gt; lt;div className="faq-title"gt; lt;h1gt;FAQlt;/h1gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div className="row"gt; lt;div className="col-md-12"gt; lt;div className="faq-content"gt; {faqs.map((faq, i) =gt; { return lt;FAQ faq={faq} index={i} key={i} toggleFAQ={toggleFAQ} /gt;; })} lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/gt; );
}; экспорт часто задаваемых вопросов по умолчанию;
и для файла часто задаваемых вопросов
function FAQ({ faq, index, toggleFAQ }) { return ( lt;gt; lt;div className="panel-group" id="accordion"gt; lt;div className="panel panel-default"gt; lt;h4 className="panel-title"gt; lt;divgt;{faq.ques}lt;/divgt; lt;/h4gt; lt;a data-parent="#accordion" data-toggle="#collapse" onClick={() =gt; toggleFAQ(index)} gt; lt;/agt; lt;/divgt; lt;div className={'panel-collapse in' (faq.open ? ' collapse' : ' ')} id="collapse"gt; lt;div className="panel-body"gt; lt;h5gt;{faq.subtitle}lt;/h5gt; lt;pgt;{faq.answer}lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/gt; ); } export default FAQ;