Javascript 对象数组放置在react组件内

我正试图建立一个网页上的功能，播放mp3的使用反应。我有一个对象数组，包含每首歌曲、专辑封面、艺术家、标题

我试图找出它在React类组件中的位置

我想做的是将mp3作为道具传递给播放器组件，但我无法使用以下行读取阵列中的对象：

我收到的错误：TypeError:无法读取未定义的属性“0”

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

下面是我的音乐组件的快照：

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;

import React，{Component}来自'React'；
从“../Player”导入播放器；
导入“/Music.css”；
类音乐扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isplay:false，
当前显示的图像：“”
}
让播放列表=[
{
src:'mymp3'，
songPicture:“someimage”，
作者：'艺人姓名'，
标题：“歌曲名”
},
{
src:'mymp3'，
songPicture:“someimage”，
作者：'艺人姓名'，
标题：“歌曲名”
},
{
src:'mymp3'，
songPicture:“someimage”，
作者：'艺人姓名'，
标题：“歌曲名”
}
];
}
handlePlayControlClick=（事件）=>{
event.preventDefault（）；
log（'单击播放按钮'）；
//TypeError:无法读取未定义的属性“0”
console.log（this.playlist[0].src）；
}
handlePauseControlClick=（事件）=>{
event.preventDefault（）；
log（'单击暂停按钮'）；
}
handleForwardControlClick=（事件）=>{
event.preventDefault（）；
log（'forwardclicked'）；
}
handleBackwardControlClick=（事件）=>{
event.preventDefault（）；
log（'backwardclicked'）；
}
render（）{
返回(
)
};
}
导出默认音乐；

---

let playlist=[array of{objects}]是否位于错误的位置？非常感谢您的帮助。

是的，

播放列表

位置不正确。它是构造函数中的一个局部变量，因此在构造函数方法之外不可见

如果它是一个静态列表，您可以将

播放列表

设置为类成员

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: ''
        };
    }
}

---

由于播放列表只是常量数据（仅在组件中读取），所以可以将其保持在类声明之上

const playlist = [{}, {}];

class Music extends Component {}

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

---

为什么不将播放列表添加到状态？很好，我无法决定是保持播放列表静态，然后将一个对象传递到状态，还是将整个播放列表置于状态，然后为每个对象添加一个键，并将其称为selected:false。我认为两者都会起作用。