TransWikia.com

Как функцию переместить в класс, ошибка The above error occurred in the component

Stack Overflow на русском Asked on November 29, 2020

Пишет ошибку "The above error occurred in the <Lesson> component:
Когда я хочу функция которая повторяется при проверке времени и комнаты
Не пойму как написать код чтобы его не дублировать всегда.

Вот весь код реализации https://codepen.io/rusline/pen/NyBYVY?editors=0011

function Lesson(props) {
    data.map((lesson, i) => {
        let date = new Date(lesson.startTime);
        let time = `${date.getHours()}:${(date.getMinutes()<10?'0':'')+date.getMinutes()}`;
        if(lesson.room === props.room && time === props.time) {
            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>
            )
        }
    })
}

class Calendar extends React.Component {
    render() {
        return(
            ....
            <tr>
                <th scope='row'>10:00</th>
                <Lesson room='Комната 1' time='9:30'/>
                <td></td>
            </tr>
        )
    }
    const data = [
        {
            "id": "1",
            "room": "Комната 1",
            "title": "Тренинг по личностному росту",
            "teacher": "Иванов Иван Иванович",
            "participaints": ["Иванов Иван", "Петров Петр", "Семенов Семен"],
            "startTime": "2017-02-24 9:00:00",
            "endTime": "2017-02-24 10:00:00"
        },
        {
            "id": "2",
            "room": "Комната 2",
            "title": "Семинар по управление персоналом",
            "teacher": "Иванова Марина Ивановна",
            "participaints": ["Иванова Марина", "Шамсутдинов Евгений"],
            "startTime": "2017-02-24 9:30:00",
            "endTime": "2017-02-24 10:00:00"
        },
        {
            "id": "3",
            "room": "Комната 1",
            "title": "Тренинг по обучение персонала",
            "participaints": ["Смирнов Владимир"],
            "teacher": "Петров Петр Петрович",
            "startTime": "2017-02-24 10:00:00",
            "endTime": "2017-02-24 10:15:00"
        }
    ]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

One Answer

Надо вернуть что data саму

function Lesson(props) {
    return data.map((lesson, i) => {
        let date = new Date(lesson.startTime);
        let time = `${date.getHours()}:${(date.getMinutes()<10?'0':'')+date.getMinutes()}`;
        if(lesson.room === props.room && time === props.time) {
            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>
            )
        }
    })
}

Answered by Руслан on November 29, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP