danielchistyakov
@danielchistyakov
Frontend Developer

Почему значение releaseyear = null и title = null при fetch?

Доброго времени суток, почему-то значение title и releaseyear не переносится в return, в console.log всё выводится. Чувствую, что где-то туплю. И можно ли как-то реализовать обновление информации из JSON раз в 5 секунд без перезагрузки страницы?

import React, { Component } from 'react'

export default class Player extends Component {
    state = {
        info: null,
        title: null,
      };
    
    async componentDidMount() {
        const url = "https://api.laut.fm/station/city/current_song";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ info: data });
        console.log(this.state.info.releaseyear);
    }
    render() {
        
        return (
            <section className="audio_player">
	            <audio controls>
		            <source src="http://stream.laut.fm/city" type="audio/mpeg" />
		            <source src="http://stream.laut.fm/city" type="audio/ogg" />
                    Ваш браузер не поддерживается
                </audio>
                <p>{this.state.info.releaseyear} — {this.state.info.title}</p>
            </section>
        )
    }
}
  • Вопрос задан
  • 40 просмотров
Решения вопроса 1
нужно как-то защититься, т.к. при первом рендеринге у вас info === null
<p>{info?.releaseyear} — {info?.title}</p>

или
{info && <p>{info.releaseyear} — {info.title}</p>}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы