TypeError: Невозможно прочитать свойство 'lightBoxHandler' из неопределенного

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