Javascript TypeError:无法读取属性'；0'；未定义的。React Redux应用程序

我的代码中出现了这个错误。不过，我能够从我的Redux Chrome扩展中读取正确的状态。我不知道错误是从哪里来的。我想它是从哪里来的

TopTracks.propTypes = {
  getHashParams: PropTypes.func.isRequired,
  getMyTopTracks: PropTypes.func.isRequired,      
  myTopTracks: PropTypes.arrayOf(PropTypes.object),
}

const mapStateToProps = state => ({
  myTopTracks: state.music.myTopTracks
})

我是否正确管理了

mapStateToProps

和

PropTypes

？因为没有其对象内容的迹象：

myTopTrackName

和

myTopTrackImage

以下是完整的代码：

class TopTracks extends Component{
  componentWillMount(){
    this.props.getMyTopTracks(getHashParams())
  }
  render(){
    let link = `${ window.location.href }`
    link = `/prueba/${link.substring(link.indexOf('#'))}`
    return(
      <div className="TopTracks">
          Now Playing: { this.props.myTopTracks[0].myTopTrackName }
          <img src={ this.props.myTopTracks[0].myTopTrackImage } alt="Top Track Album" style={{ width: 300 }} />
          <Button href={ link }>Continue</Button>
      </div>
    )
  }
}

TopTracks.propTypes = {
  getHashParams: PropTypes.func.isRequired,
  getMyTopTracks: PropTypes.func.isRequired,      
  myTopTracks: PropTypes.arrayOf(PropTypes.object),
}

const mapStateToProps = state => ({
  myTopTracks: state.music.myTopTracks
})

export default connect(mapStateToProps, { getHashParams, getMyTopTracks } )( TopTracks )

类TopTracks扩展组件{
组件willmount（）{
this.props.getMyTopTracks（getHashParams（））
}
render（）{
let link=`${window.location.href}`
link=`/prueba/${link.substring（link.indexOf（'#'））}`
返回(
正在播放：{this.props.myTopTracks[0].myTopTrackName}
持续
)
}
}
TopTracks.propTypes={
getHashParams:PropTypes.func.isRequired，
getMyTopTracks:PropTypes.func.isRequired，
myTopTracks:PropTypes.arrayOf（PropTypes.object），
}
常量mapStateToProps=状态=>({
myTopTracks:state.music.myTopTracks
})
导出默认连接（mapStateToProps，{getHashParams，getMyTopTracks}）（TopTracks）

如果错误来自显示的代码，则表示

this.props.myTopTracks

未定义，这反过来表示

state.music.myTopTracks

未定义

真正的问题在于应用程序的初始状态。查看redux还原程序，确保初始状态将

myTopTracks

设置为空数组，

[]

。这是在从服务器获取真实列表之前初始化应用程序状态的一种常见、安全的方法

您还需要更改视图代码以说明空列表，因为如果列表为空，

myTopTracks[0]

将

未定义。解决此问题的一种方法是在列表中创建一个安全的默认第一个对象，该对象将由获取的传入数据替换，例如：

{
  myTopTracks: [{
    myTopTrackName: 'Loading...',
    myTopTrackImage: ''
  }]
}

另一种方法是检查列表的长度，如果列表为空，则渲染其他内容，如微调器。这实际上取决于当时应用程序的设计要求。但这是两种选择。
哦，谢谢！！但是现在，如果我要求
这个.props.myTopTracks[1].myTopTrackName
（当使用不同于0的数字时，我设置的状态如下` case SET\u TOP\u TRACKS:return{…state，myTopTracks:[{myTopTrackName:action.myTopTracks[0].myTopTrackName，myTopTrackImage:action.myTopTracks[0].myTopTrackImage}，{myTopTrackName:action.myTopTracks[1].myTopTrackName，myTopTrackImage:action.myTopTracks[1].myTopTrackImage}，…`不需要单独设置每一个。只需从操作中获取数组并将其直接置于状态：
case set_TOP_TRACKS:return{…state，myTopTracks:action.myTopTracks}
。