Загрузка расписания

Теперь страница расписания. Расписание приходит из showtimes.json, как в проекте с расписанием, только теперь его загружает эффект, как в уроке «Эффекты». Расписание — это состояние, сначала пустой массив, а эффект с зависимостями [] загружает файл, когда Showtimes появляется на странице:

const [showtimes, setShowtimes] = useState([]);

useEffect(() => {
    async function loadShowtimes() {
        const response = await fetch("showtimes.json");
        setShowtimes(await response.json());
    }
    loadShowtimes();
}, []);

В таблице map() делает строку для каждого сеанса, с его id в качестве ключа: четыре ячейки с днём, временем, фильмом и залом и пятая — с кнопкой «Выбрать места». В проекте «Кинотеатр на Tailwind» скрипт давал этой кнопке классы через button.className = "…". В JSX вы пишете их прямо на кнопке, как на любом другом элементе.

Каждый раз, когда вы открываете расписание, Showtimes снова появляется на странице, поэтому его эффект запускается заново и снова загружает файл. Когда вы уходите на главную, React убирает компонент со страницы, а вместе с ним и его состояние. Здесь это нормально: файл маленький, а расписание за это время могло измениться.

Пока файл в пути, на странице написано Загрузка…, а если сервер отвечает ошибкой, об этом тоже сказано, как на старой странице. Это ещё два состояния, loading и error, как в уроке «Эффекты». Проверяйте response.ok, прежде чем читать данные.