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

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

0 голосов
/ 24 января 2019

Я пытаюсь автоматически закрыть лайтбокс после завершения воспроизведения видео.

Атрибут

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>
         );
    }

1 Ответ

0 голосов
/ 24 января 2019

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

...