Question

我的代码中出现此错误。我可以从我的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 )

Answer 1

如果错误来自显示的代码，则表示this.props.myTopTracks为undefined，这意味着state.music.myTopTracks为undefined。

真正的问题出在你应用的初始状态。查看redux reducers并确保初始状态将myTopTracks设置为空数组[]。这是在从服务器获取真实列表之前初始化应用程序状态的常用，安全的方法。

您还需要更改视图代码以考虑空列表，因为如果列表为空，myTopTracks[0]将为undefined。解决这个问题的一种方法是在列表中创建一个安全的默认第一个对象，该对象将被来自fetch的传入数据替换，例如：

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

另一种方法是检查列表的长度，如果它是空的，则渲染其他内容，如微调器。这实际上取决于您的应用程序的设计要求。但这有两个选择。

TypeError：无法读取未定义的属性“0”。 React Redux App

1 个答案: