使用 this 作为绑定参数时 SetState 不起作用（ReactJS）

Question

I have a binded function inside a map function which is activated by onClick, yet I cannot access this function because it seems that using this as a parameter stops setState working. originally the setState in the buttonPress function would work, but now that i have added bind(this, (key)) to allow the key parameter to pass through, it skips setState and I can only console.log().

The intention of everything is to identify what entry has been clicked and then pass it as a prop to a child class component.

The map() function

<div ref={p => this.MyMenu = p} className="mainmenu">
<p className="title">Song List</p>
    <div className="songList">
        {song.map(song => (<div onClick={this.buttonPress.bind(this, song.key)}  key={song.key}  className="song-entry">
            <h3 className="song-name">{song.name}</h3>
            <p className="song-length">{song.length}</p>
            <p className="song-desc">{song.desc}</p>
        </div>))
        }

    </div>

    </div>

and here is the function buttonPress

buttonPress (key) {

    console.log(key);

    let localkey = key 


    this.setState({songchoice: localkey});

    console.log(this.state.songchoice);

    clearInterval(this.countdownInterval);
    this.setState({count:3, countdown:true, songchoice: key}, 
        ()=>{setInterval(this.countdownInterval, 3000); this.aboutTween = TweenMax.to(this.aboutSection, .8,{opacity:1, y: -100, ease: Power3.easeOut})});

}

also a GitHub link if you'd like to look at the whole page.

Answer 1

Is there a specific reason to bind I don't know May be you could have tried it is a much simpler way, something like

onClick={ () => this.buttonPress(song.key)}

Answer 2

I figured it out. SetState was actually working but because it was asynchronously set, the console log didn't happen reflect the change.