TypeError:无法读取未定义的属性“0”。React Redux应用程序
TypeError:无法读取未定义的属性“0”。React Redux应用程序
提问于 2018-06-09 02:55:25
我在我的代码中得到了这个错误。不过，我可以从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 )回答 1
Stack Overflow用户
发布于 2018-06-09 03:11:48
如果错误来自于所显示的代码，则意味着this.props.myTopTracks为undefined，而这又意味着state.music.myTopTracks为undefined。
真正的问题是你的应用程序的初始状态。查看redux缩减程序，并确保初始状态将myTopTracks设置为空数组[]。在从服务器获取实际列表之前，这是一种常见的、安全的初始化应用程序状态的方法。
您还需要更改视图代码以处理空列表，因为如果列表为空，则myTopTracks[0]将为undefined。解决这个问题的一种方法是在列表中创建一个安全的默认第一个对象，该对象将被从fetch传入的数据替换，例如：
{
myTopTracks: [{
myTopTrackName: 'Loading...',
myTopTrackImage: ''
}]
}另一种方法是检查列表的长度，如果列表为空，则呈现其他内容，如微调器。这真的取决于你的应用在这一点的设计要求。但这是两种选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50766859
复制相关文章
相似问题