Даниил Чистяков

https://codesandbox.io/s/unruffled-mestorf-dvbsh?f...

если в компоненты, без useEffect, то можно так https://codesandbox.io/s/youthful-villani-70s40?fi...

pointer-events: none

handleClick=(e)=>{
e.preventDefault();
e.target.style.color = 'black'
console.log(e.target);
}

Когда обращаетесь к значению, его ещё нет.

А изменения не отслеживаются.

Класс DB - надо добавить дефолтное значение:

class DB {
  info = null;
  ...

Компонент Episodes - добавить эффекту значение DB.info в качестве зависимости:

const Episodes = observer(() => {
  useEffect(() => {
    ...
  }, [ DB.info ]);
  ...

Если же не хотите видеть дефолтное значение info внутри Episodes, тогда его экземпляр следует рендерить только при наличии данных, в App замените return <Episodes />; на return DB.info && <Episodes />;.

https://codesandbox.io/s/kind-torvalds-co3km?file=...

Надо импортировать модуль Lazy: import { Lazy } from 'swiper';. Этого вы не сделали.

Подключить его: SwiperCore.use([ Lazy ]);. Этого вы не сделали.

Экземпляру слайдера указать, что необходима ленивая загрузка: <Swiper lazy={true}>. Этого вы не сделали.

Изображениям добавить класс swiper-lazy, атрибут src заменить на data-src. Ну, хоть это у вас есть.

state не меняется моментально после this.setState, если вы хотите получить новые значения, то

const data = await response.json();
this.setState({ info: data });
const artistname = data.artist.name;
const title = data.info.title;

Потому что setFilms асинхронный.
Чтобы получить обновленный films используй useEffect

useEffect(() => {
    // new films here
}, [films]);

Если отвечать на оригинальный вопрос, то вызов setFilms не моментально обновляет переменную films (React батчит обновление на следующий тик ивентлупа) + значение films находится в замыкании.

Приведённая вами ссылка показывает причину проблемы и направление для её исправления.

Дело в том, что Rubik является variable шрифтом.

Подключение шрифта у вас выглядит вот так:

https://fonts.googleapis.com/css2?family=Rubik&display=swap

а в стилях используется font-weight: 600. Если вы посмотрите внутрь CSS, загружаемой для подключения шрифта, вы (естественно) увидите там подгрузку шрифта для font-weight: 400, ведь именно это значение соответствует Regular и используется по-умолчанию.

Таким образом вы ненамеренно создаёте ситуацию, когда вы используете начертание шрифта, которого нет. Очевидно где-то в Firefox (явно в списке зависимостей этого issue) есть проблема рендера variable fonts, причём специфичная для Windows т.к. я проверил (через BrowserStack) на MacOS и там всё нормально.

Исправление тоже очевидно - вам необходимо корректно подключать шрифты, указывая списки нужных вам начертаний. Для вашего примера это будет:

https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap

результат сразу становится корректным:

async componentDidMount() {
    const lastSongsResponse = await fetch("https://api.laut.fm/station/key/last_songs");
    const lastSongs = await lastSongsResponse.json();
    lastSongs.length = Math.min(7, lastSongs.length);

    const promises = lastSongs.map((song) => new Promise((resolve, reject) => {
        const params = {
            method  : 'album.getInfo',
            artist  : song.artist.name.replace(' & ', ', '),
            album   : song.album,
            api_key : 'apikey',
            format  : 'json',
        };

        const url = "https://ws.audioscrobbler.com/2.0/?" + Object.keys(params).map((key) => `${key}=${params[key]}`).join('&');

        const cover = await fetch(url)
            .then((response) => response.json())
            .then((songData) => songData.album.image[4]["#text"])
            .catch(err => reject(err));

        const date = new Date(song.started_at);

        const songData = {
            id1        : song.id,
            id2        : song.id + 1,
            artist     : song.artist.name,
            title      : song.title,
            cover      : cover,
            started_at : date.getHours() + ':' + date.getMinutes().toString().padStart(2, '0')
        }
        
        resolve(songData);
    }));

    const results = await Promise.all(promises);

    this.setState({ results: results })
}

В браузере точно так же:
removeChar('eloquent') // "l", а надо "loquen"
В задании требуется удалить первый и последний символы строки и вернуть оставшееся.
Код в вопросе возвращает единственный символ.

Попробуй поставить атрибут onClick={Func} а уже Fuck будет менять содержимое.

нужно как-то защититься, т.к. при первом рендеринге у вас info === null
<p>{info?.releaseyear} — {info?.title}</p>

или
{info && <p>{info.releaseyear} — {info.title}</p>}

Прочитать документацию для метода .map и узнать что вторым аргументом функция-обработчик принимает порядковый номер элемента.

А ещё Вы нарушили правило использования ресурса 3.8.