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

Question

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

Доброго времени суток, почему-то значение 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>
        )
    }
}

Answer 1

[Андрей Пастухов]

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

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

Comments

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

Спасибо большое, сработало! А что в данном случае сделал знак вопроса?

[Андрей Пастухов]

здесь посмотри

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

tyllo, спасибо!