Question

我的react道具目前有一些问题。我有一个Songs类，它包含10首歌曲的数组，并且每个song组件都有自己的playPause组件和一个number道具。在this.props.number中访问playPause可以在除一个功能之外的所有功能中正常工作。

这将返回所有组件的配件号（单击的除外，为1-10）-编辑：该位的完整代码基本上是the same as this：

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绑定到某个地方，但是我无法弄清楚确切的位置。有什么建议吗？

React-组件数组-this.prop始终是最后一个组件的prop

0 个答案: