Ошибка типа: Не удается прочитать свойства неопределенного (чтение «вопросов»)

#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:

С вашим кодом существует множество проблем.

  1. Проблема с котировками
  2. Возврата на карте нет
  3. ключ отсутствует на карте

Пожалуйста, найдите обновленный код.

 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;