Массив размещения объектов внутри реагирующей компоненты - PullRequest
Новая
       4

Массив размещения объектов внутри реагирующей компоненты

0 голосов
/ 08 февраля 2020

Я пытаюсь создать функциональность на веб-странице, которая воспроизводит mp3 с использованием React. У меня есть массив объектов, которые содержат каждую песню, обложку альбома, исполнителя, название.

Я пытаюсь выяснить, где это находится в компоненте класса React.

Что я хотел бы сделать, это передать mp3 в качестве реквизита компоненту проигрывателя, но я не могу прочитать объект внутри массива, используя эту строку:

Ошибка I получаю: TypeError: Невозможно прочитать свойство '0' из неопределенного 

console.log(this.playlist[0].src);

Ниже приведен снимок моего компонента Musi c: 

import React, { Component } from 'react';
import Player from '../Player';
import './Music.css';


class Music extends Component {
    constructor(props) {
        super(props);
        this.state = {
            IsPlaying: false,
            currentImageShown: ''
        }
        let playlist = [
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            },
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            },
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            }
        ];
    }

    handlePlayControlClick = (event) => {
        event.preventDefault();
        console.log('play button clicked');

        // TypeError: Cannot read property '0' of undefined
        console.log(this.playlist[0].src);
    }
    handlePauseControlClick = (event) => {
        event.preventDefault();
        console.log('pause button clicked');
    }
    handleForwardControlClick = (event) => {
        event.preventDefault();
        console.log('forward clicked');
    }
    handleBackwardControlClick = (event) => {
        event.preventDefault();
        console.log('backward clicked');
    }
        render() {
            return (
                <div>
                    <Player 
                        onPlayClick={this.handlePlayControlClick}
                        onPauseClick={this.handlePauseControlClick}
                        onForwardControlClick={this.handleForwardControlClick}
                        onBackwardControlClick={this.handleBackwardControlClick}
                    />
                </div>
            )
        };
    }

export default Music;

Let playlist = [array {объекты}] в неправильном месте? Любая помощь с благодарностью.

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020

Поскольку список воспроизведения - это просто постоянные данные (только чтение в компоненте), вы можете держать его выше объявления класса. 

const playlist = [{}, {}];

class Music extends Component {}

// console.log(playlist[0].src);
0 голосов
/ 08 февраля 2020

Да, playlist в неправильном месте. Это локальная переменная в конструкторе, поэтому она не видна вне метода конструктора.

Если это список stati c, вы можете сделать playlist членом класса. 

class Music extends Component {
    playlist = [
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            },
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            },
            {
                src: 'mymp3',
                songPicture: 'someimage',
                author: 'artistname',
                title: 'songname'
            }
    ];

    constructor(props) {
        super(props);
        this.state = {
            IsPlaying: false,
            currentImageShown: ''
        };
    }
}
...