当从父组件状态传递时，React prop没有在正确的时间更新

我在react中遇到了一个非常烦人的bug，我认为这是与调用不在我的组件render方法中的方法有关。我认为我已经提供了太多的代码，这将是很难为任何人提供帮助，但让我试着解释我的问题。

我正在进行一个返回25项的API调用。当用户点击下一步时，它应该改变背景并播放与背景相关的歌曲。这是可行的，但是当用户到达列表的末尾时，我想回到第一首歌。背景图像返回，但播放的是错误的歌曲。然后，当用户再次点击时，问题自行纠正。

我认为问题是由于nextSong方法中的这一行。

this.audio.src = this.state.songs[this.props.song + 1];

请参阅下面的完整代码。如果有必要，我可以提供一个github链接，在那里项目可以克隆，这可能更容易调试。

我知道SO不是为了修复别人的代码，但以防万一我错过了一些基本的反应知识，我想在这里问。

var App = React.createClass({
    getInitialState: function() {
        return {
              data: [],
              song: 0
        };
    },  
    nextSong: function() {
        if(this.state.song === this.state.data.length) {
            this.setState({song : 0});
        }else{
            this.setState({song : this.state.song += 1});
        }
    },
    previousSong: function() {
        if(this.state.song === 0) {
            this.setState({song : this.state.data.length});
        }else{
            this.setState({song : this.state.song -= 1});
        }
    },
    getData: function(){
        $.ajax({
            url: '...',
            method: 'GET',
            success: function(response){
                this.setState({data: response.items});
            }.bind(this)
        })
    },
    render: function() {
        return(
            <div>
                <BackgroundImage src={this.state.data} image={this.state.song} />
                <Button src={this.state.data} song={this.state.song} nextSong={this.nextSong} previousSong={this.previousSong} />
            </div>
        )
    }
});
    var BackgroundImage = React.createClass({
        render: function() {
            var images = this.props.src.map(function(photo, i){
                return(photo.track.album.images[1].url)
            })
            var divStyle = {
                background: 'url(' + images[this.props.image] + ')'
            }
            return(<div style={divStyle}></div>)
        }
    });
var Button = React.createClass({
    getInitialState: function(){
        return{
            songs:[],
            playing: false
        }
    },
    audio: new Audio,
    playSong: function(){
        this.setState({playing: true});
        this.audio.src = this.state.songs[this.props.song];
        this.audio.play();
    },
    pauseSong: function() {
        this.setState({playing: false});
        this.audio.pause();
    },
    nextSong: function() {
        this.audio.src = this.state.songs[this.props.song + 1];
        this.audio.play();
    },
    onClickNext: function(){
        this.setState({playing: true});
        this.props.nextSong();
        this.nextSong()
    },
    previousSong: function() {
        this.setState({playing: true});
        this.audio.src = this.state.songs[this.props.song - 1];
        this.audio.play();
    },
    onClickPrevious: function(){
        this.props.previousSong();
        this.previousSong()
    },
    render: function() {
        var self = this;
        var songs = this.props.src.map(function(song, i){
            self.state.songs.push(song.track.preview_url)
        });
        return (
            <div className="button">                
                <div className="next" onClick={this.onClickNext}>
                    NEXT
                </div>
                <div className="pause">
                    <p onClick={this.state.playing ? this.pauseSong : this.playSong}></p>
                </div>
                <div className="prev" onClick={this.onClickPrevious}>
                  PREVIOUS
                </div>
            </div>
        )
    }
});