Как избавиться от ошибки "The above error occurred in the component:?

Когда попытался сделать рефакторинг кода, вывести повторяющие значение во функцию, то получаю ошибку
The above error occurred in the <Lesson> component:
    in Lesson (created by Calendar)
    in tr (created by Calendar)
    in tbody (created by Calendar)
    in table (created by Calendar)
    in div (created by Calendar)
    in Calendar

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:626)
    at invokeGuardedCallback (react-dom.development.js:476)
    at renderRoot (react-dom.development.js:10908)
    at performWorkOnRoot (react-dom.development.js:11556)
    at performWork (react-dom.development.js:11509)
    at requestWork (react-dom.development.js:11420)
    at scheduleWorkImpl (react-dom.development.js:11274)
    at scheduleWork (react-dom.development.js:11231)
    at scheduleTopLevelUpdate (react-dom.development.js:11735)
    at Object.updateContainer (react-dom.development.js:11773)

Но не пойму что не так я делаю. Последнее к чему я пришел это написал вот так
function Lesson(props){
  try{
    data.map((lesson, i) => {
      let date = new Date(lesson.startTime);
      let time = `${date.getHours()}:${(date.getMinutes()<10?'0':'')+date.getMinutes()}`;
      if(lesson.room === 'Комната 1' && time === '9:00'){
        return(
          <td key={i}>
            <div className='lesson'>
              <p>{lesson.title}</p>
              <p>{lesson.teacher}</p>
              {lesson.participaints.map(participaints => {
                return <p key={participaints.toString()}>{participaints}</p>
              })}
            </div>
          </td>
        ) 
      }
    })  
  } catch(e){
    console.log(e);
  }
}

Ну и соотвтественно пробовал в div выводить этот блок а не через td, но без успешно.
И в классе вывода я выводил его примерно так
class Calendar extends React.Component
{
  render(){
    return(
....
<Lesson room='Комната 3' time='9:30'/>
....
)}
}

Весь код вот https://codepen.io/rusline/pen/NyBYVY?editors=0011
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Ну, как минимум, надо что-то вернуть из вашего Lesson. Т.е., должно быть не просто data.map, а return data.map.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы