React - массив компонентов - this.prop всегда является опорой последнего компонента - PullRequest
0 голосов
/ 16 января 2019

У меня в настоящее время есть некоторые проблемы с моими реактивными опорами. У меня есть класс Songs, который содержит массив из 10 песен, и каждый из компонентов song имеет свой собственный компонент playPause с опорой number. Доступ к this.props.number в playPause работает нормально во всех функциях, кроме одной.

Возвращает подходящие номера для всех компонентов (1-10, за исключением одного нажатого). - Правка: полный код этого бита в основном равен и :

handleClickOutside=(event)=> {
        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
           console.log(this.props.number);
        }
    };

Редактировать: onStateChanged является частью Spotify Web API - он вызывается при изменении состояния игрока (воспроизведение / пауза).

Возвращает только число 10 (номер числа последнего компонента) - независимо от того, какой компонент вызывает функцию.

createEventHandlers()
{
this.player.on('player_state_changed',state => this.onStateChanged(state));}

onStateChanged=(state)=> {
        if (state !== null) {
                if(state.paused){
                    console.log(this.props.number); //returns 10
                }
        }

    };

Редактировать: еще немного кода:

componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

setWrapperRef=(node)=> {
        this.wrapperRef = node;
    };

render() {
        return(
            <div ref={this.setWrapperRef}>
            <div className={this.state.playing ? 'overlay visible': "overlay"} onClick={this.togglePlayIcon}>
                <b className="icon" title="Play Song">
                    <i className={this.state.playState}></i>
                </b>
            </div>
            </div>
    );

checkForPlayer()
{
    clearInterval(this.playerCheckInterval);

    if (window.Spotify !== null) {
        this.player = new window.Spotify.Player({
            name: "Top10 Spotify Player",
            getOAuthToken: cb => { cb(PlayPause.readCookie("access_token")); },
            volume: 0.1
        });
        this.createEventHandlers();

        // finally, connect!
        this.player.connect();
    }
}

Полагаю, мне нужно куда-нибудь связать this, но я не могу понять, где именно. Любой совет?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...