danielchistyakov
@danielchistyakov
Frontend Developer

Как использовать массив из компонента в return без setState?

Имеется компонент, в котором парсятся 2 JSON-ки, далее в return выводятся данные через map. Мне было необходимо объединить 2 массива из двух JSON, но как сделать setState, чтобы затем использовать этот объединённый массив в return?
Когда пытаюсь сделать setState, то вылазит ошибка о том, что нельзя использовать setState с массивами (Error: Objects are not valid as a React child (found: object with keys {name, artist, url, image, listeners, playcount, tracks, tags}). If you meant to render a collection of children, use an array instead.)
Вот код:
async componentDidMount () {
        var response = await fetch("https://api.laut.fm/station/city/last_songs");
        const data1 = await response.json();
        this.setState({ data1 });
        const data2 = [];
        for (var i = 0; i < 10; i++) {
            var response = await fetch("https://ws.audioscrobbler.com/2.0/?method=album.getInfo&artist=" + data1[i].artist.name.replace(' & ', ', ') + "&album=" + data1[i].album + "&api_key=apikey&format=json");
            data2[i] = await response.json();
        }
        const lastsongs = [data2, data1];
        this.setState({ lastsongs });
        console.log(lastsongs);
    }

Вот вывод:
render() {
        return (
            <section className={style.last_songs}>
                <h2 className={style.section_title}>История эфира:</h2>
                <div className={style.song_history}>
                    <div>
                    {this.state.lastsongs?.map (song => (     
                        <div className={style.last_song} key={song[0].album.playcount} style={{ backgroundImage: "url(" + song[0].album.image[4]["#text"] + ")"}}>
                        <p className={style.name} key={song[1].id}>{song[1].artist} — {song[1].title}</p>
                        </div>
                    ))}
                    </div>
                    </div>
            </section>
        )
    }

Или как тогда это лучше всё реализовать?
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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