TypeError: Cannot read property 'lightBoxHandler' of undefined

Question

我正在尝试在视频播放完毕后自动关闭灯箱。

onEnded 属性在 99.99% 的时间里工作得很好，但有时它不会触发回调。所以我尝试使用onDuration。

以上错误发生在设置为 onDuration 的回调中。控制台打印持续时间很好，但我不确定为什么它无法识别以下方法并抛出错误。 this.props.lightBoxHandler(this.props.entry.type);

  renderEntry() {
        if (this.props.entry.type === "photo") {
            this.disableLightbox();
         return  <img alt={Math.random()} src={this.props.entry.entry} onClick={ () => this.props.lightBoxHandler(this.props.entry.type)} />
        } 
        if (this.props.entry.type === "video") {
        return   <ReactPlayer
            url={this.props.entry.entry}
            className='react-player'
            playing={true}
            width='100%'
            height='100%'
            onEnded={() => this.props.lightBoxHandler(this.props.entry.type)}
            onDuration={(duration) => {
                console.log("Duration " + duration);
                setTimeout(function () {
                    this.props.lightBoxHandler(this.props.entry.type);
            }, duration*1000)  }}
            />
        }
    }

    render() {
        let classList = this.props.entry.is === true ? "lightbox-wrapper active" : "lightbox-wrapper";
        return ( 
            <React.Fragment>
                <div className={classList}>
                    {this.renderEntry()}
                </div>
            </React.Fragment>
         );
    }

Answer 1

TLDR：将 setTimeout 中的函数更改为箭头函数，它应该可以工作。

之所以 this.props.lightBoxHandler 在 onEnded 中定义但在 onDuration 中没有定义，是因为在 onDuration 中你在函数内部调用 this.props setTimeout 用 function 关键字声明，而不是箭头函数。

箭头函数在词法范围内使用 this。用 function 定义的函数有自己的 this.

参见：https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

TypeError: Cannot read property 'lightBoxHandler' of undefined

TypeError: Cannot read property 'lightBoxHandler' of undefined

reactjs

react-props

react-player