Question

我认为答案与'this'的背景有关。在尝试通过传递handleEnter（）函数来渲染createTrack时，我收到了“无法读取未定义道具”的错误。但是，我可以传递一个没有'this'的常规函数，例如song.play（）;

有人能给出更好的解释吗？

 handleEnter(){
    this.song.play();
        //    this.props.mouseEnter();
 }
createTrack(track){
    var song = new Audio([track.preview_url]);


    return   ( 
                <div className="image" key={track.id}>
                    <img className="img-circle" src={track.album.images[0].url} onMouseEnter={this.handleEnter.bind(this)} onMouseLeave={()=>song.pause()}/>
                    <p className="showMe"><span>{track.name}</span></p>
                    <p className="showMeArtist"><span>{track.artists[0].name}</span></p>

                </div>
                );
}
getTracks(){
if(this.props.tracks){
    console.log(this.props.tracks);
 return <div>{this.props.tracks.map(this.createTrack)}</div>
    }
}
 render(){
    return(
                    <div>{this.getTracks()}</div>
    )
}

Answer 1

我认为这是问题所在。将bind添加到map的function参数中。像这样：

return <div>{this.props.tracks.map(this.createTrack, this)}</div>

编辑：我稍微改变了我的回答。当map调用createTrack时，除非你给它一个thisArg参数，否则这是未定义的。如果没有thisArg地图，则没有写入函数的范围。以下是MDN的解释 -

如果提供了thisArg参数来映射，它将被传递给调用时的回调，用作其值。否则，价值 undefined将被传递以用作其值。这个值最终通过回调观察是根据通常情况确定的确定函数所见的规则。

Answer 2

歌曲是 createTrack（）的本地歌曲。我建议你把歌放在州里并通过this.state.song访问它。

为什么我不能将此函数传递给React中的onMouseEnter？

2 个答案: