Fatal编程技术网
  • reactjs/
  • ReactJS，Radium，AltJS-未捕获类型错误：无法读取属性'；toString'；未定义的

ReactJS，Radium，AltJS-未捕获类型错误：无法读取属性'；toString'；未定义的

reactjs

ReactJS，Radium，AltJS-未捕获类型错误：无法读取属性'；toString'；未定义的,reactjs,inline-styles,Reactjs,Inline Styles,我刚刚用NPM更新了我的项目，我不清楚是什么导致了下面的错误。prefixer.js来自radium 未捕获的TypeError:无法读取未定义的-prefixer.js:173的属性“toString” _getPrefixedValue@prefixer.js:173（匿名函数）@ prefixer.js:275getPrefixedStyle@prefixer.js:261resolveStyles@ resolve styles.js:215（匿名函数）@ 解析styles.js:154

我刚刚用NPM更新了我的项目，我不清楚是什么导致了下面的错误。prefixer.js来自radium

未捕获的TypeError:无法读取未定义的-prefixer.js:173的属性“toString”

_getPrefixedValue@prefixer.js:173（匿名函数）@ prefixer.js:275getPrefixedStyle@prefixer.js:261resolveStyles@ resolve styles.js:215（匿名函数）@ 解析styles.js:154MapSingleChildInContext@ ReactChildren.js:97traverseAllChildrenImpl@ traverseAllChildren.js:111traverseAllChildrenImpl@ js:133traverseAllChildren@ traverseAllChildren.js:246mpchildren@ ReactChildren.js:123resolveStyles@resolve styles.js:152render@ enhancer.js:34_renderValidatedComponent没有自己的或上下文@ ReactCompositeComponent.js:789_renderValidatedComponent@ ReactCompositeComponent.js:816wrapper@ReactPerf.js:70mountComponent @ReactCompositeComponent.js:237wrapper@ ReactPerf.js:70mountComponent@ReactReconciler.js:38mountChildren@ ReactMultiChild.js:192_createContentMarkup@ ReactDOMComponent.js:289mountComponent@ js:199mountComponent@ js:38mountComponent@ ReactCompositeComponent.js:247wrapper@ReactPerf.js:70mountComponent @ReactReconciler.js:38_updateRenderedComponent@ ReactCompositeComponent.js:764_performComponentUpdate@ js:726updateComponent@ ReactCompositeComponent.js:642wrapper@ ReactPerf.js:70PerformUpdate如果需要@ ReactCompositeComponent.js:539性能更新（如有必要）@ ReactReconciler.js:115RunBatchedUpdate@ReactUpdates.js:151perform@ Transaction.js:134perform@Transaction.js:134perform@ ReactUpdates.js:95FlushBatchedUpdate@ReactUpdates.js:175wrapper@ ReactPerf.js:70closeAll@Transaction.js:207执行@ Transaction.js:148BatchedUpdate@ ReactDefaultBatchingStrategy.js:66enqueueUpdate@ ReactUpdates.js:215enqueueUpdate@ ReactUpdateQueueue.js:30enqueueSetState@ ReactUpdateQueue.js:208ReactComponent.setState@ ReactComponent.js:69onChange@Player.js:61emit@ index.js:72AltStore.emitChange@AltStore.js:54（匿名函数）@ AltStore.js:84Dispatcher.$Dispatcher\u invokeCallback@ Dispatcher.js:220Dispatcher.Dispatcher@Dispatcher.js:195（匿名） 函数）@index.js:74Alt.batchingFunction@index.js:58dispatch@ index.js:73dispatch@index.js:43setSource@ PlayerActions.js:6（匿名函数）@Album.js:38（匿名函数） 函数）@Album.js:77fire@jquery.js:3099fireith@ jquery.js:3211done@jquery.js:8264jQuery.ajaxTransport.send.callback @jquery.js:8605

行
this.setState（PlayerStore.getState（））
似乎在我的PlayerStore来自Alt的地方触发了这个

这是我的Player.js文件，其中的组件具有上面的行：

var React = require('react');
var Radium = require('radium');
var _ = require('underscore');
var Utils = require('../../utils/Utils');

/*** CONSTANTS ***/
var LayoutColors = require('../../constants/LayoutColors');
var LayoutSizes = require('../../constants/LayoutSizes');
var LayoutFonts = require('../../constants/LayoutFonts');

/*** COMPONENTS ***/
var PlayerSize = require('./PlayerSize');
var YouTube = require('../YouTube/YouTube');
var PlayerControlsTop = require('./PlayerControlsTop');
var PlayerControlsBottom = require('./PlayerControlsBottom');
var PlayerHeader = require('./PlayerHeader');
var PlayerSource = require('./PlayerSource');

/*** FLUX ***/
var PlayerStore = require('../../stores/PlayerStore');
var PlayerActions = require('../../actions/PlayerActions');

var Player = React.createClass({

    propTypes: {

    },
    getDefaultProps: function() {
        return {};
    },
    getInitialState: function(){
        return PlayerStore.getState();
    },
    componentWillMount: function() {
//        PlayerActions.setSource(this.props.id, this.props.type, this.props.playingTrack);
    },
    componentWillReceiveProps: function(nextProps) {
/*
        if(nextProps.id != this.props.id
            || nextProps.type != this.props.type){

            PlayerActions.setSource(nextProps.id, nextProps.type, nextProps.playingTrack);                
        }
        else if(!_.isEqual(nextProps.playingTrack, this.state.playingTrack)){
            PlayerActions.setSource(nextProps.id, nextProps.type, nextProps.playingTrack);            
        }
*/
    },
    componentDidMount: function() {
        PlayerStore.listen(this.onChange);
    },
    componentWillUnmount: function() {    
        //MAY COME BACK TO THIS... WILL NEVER NEED TO UNMOUNT
        //PlayerActions.unMount();    
        PlayerStore.unlisten(this.onChange);
    },
    onChange: function() {
        var toSet = PlayerStore.getState();   
        console.log('##### 1 #####');
        console.log(toSet);     
        this.setState(toSet);
    },

    /*** Youtube Events ***/
    onReady: function(event) {
        PlayerActions.setPlayer(event.target);
    },
    onDestroy: function() {
        console.log('onDestroy()');
//        PlayerActions.setPlayer(null);
    },  
    onProgressBarChange: function(current, total, perc) {
        PlayerActions.setProgressBar(current, total, perc);
    },
    onPlay: function() {
        PlayerActions.setPlaying(true);
    },
    onPause: function() {
        PlayerActions.setPlaying(false);
    },
    onEnd: function() {
        PlayerActions.forward();
    },

    /*** Render ***/

    render: function() {
        console.log('##### 2 #####');
        console.log(this.state);     


        var hover = Radium.getState(this.state, 'player', ':hover');

        var youtubeOptions = {
            height: '100%',
            width: '100%',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                start: this.state.start,
                autoplay: 1,
                controls: 0,
                showinfo: 0,
                rel: 0,
                iv_load_policy: 3
            }
        };

        var youtubeElement = (this.state.playingTrack && this.state.playingTrack[this.state.mode]) ?
                                <YouTube 
                                    videoId={this.state.playingTrack[this.state.mode].youtubeId}
                                    opts={youtubeOptions}
                                    onReady={this.onReady}
                                    onDestroy={this.onDestroy}
                                    onPlay={this.onPlay}
                                    onPause={this.onPause}
                                    onProgressBarChange={this.onProgressBarChange}
                                    onEnd={this.onEnd} /> 

                                    : <div style={{height: '100%', width: '100%', backgroundColor: 'black'}}></div>;

        if(this.state.source){
            var favoriteTrack = false;
            if(this.state.playingTrack){
                favoriteTrack = this.state.playingTrack.favorite;
            }

            var by = null;
            if(this.state.source.type == 'playlist'){
                by = this.state.source.owner;
            }
            else if(this.state.source.type == 'album'){
                by = this.state.source.artist;
            }

            return (
                <div key="player" style={containerStyle} >
                    <PlayerSize />
                    <div style={mainStyle}>
                        <PlayerControlsTop 
                            hover={hover}
                            playingTrack={this.state.playingTrack} />
                        <div style={youtubeStyle} >
                            {youtubeElement}
                        </div>
                        <PlayerControlsBottom 
                            hover={hover}
                            perc={this.state.perc}
                            current={this.state.current}
                            total={this.state.total}
                            playing={this.state.playing}
                            mute={this.state.mute}
                            random={this.state.random}
                            repeat={this.state.repeat} 
                            favoriteTrack={favoriteTrack} />
                    </div>
                    <PlayerHeader
                        title={this.state.source.title}
                        by={by}
                        type={Utils.capitalizeFirstLetter(this.state.source.type)}
                        hover={hover}
                        radio={this.state.radio} /> 
                    <PlayerSource 
                        type={this.state.source.type}
                        tracks={this.state.source.tracks}
                        favorite={this.state.favorite}
                        playingTrack={this.state.playingTrack}
                        mode={this.state.mode}
                        hover={hover} />
                </div>
            );
        }
        else{
            return (
                <div style={containerStyle}></div>
            );
        }

    }
});

/*** STYLES ***/

var containerStyle = {
    position: 'fixed',
    zIndex: 2,
    right: 0,
    bottom: 0,
    top: LayoutSizes.topHeight,
    backgroundColor: LayoutColors.darkGrey,
    color: LayoutColors.darkGreyText,
    width: LayoutSizes.rightWidth,
    borderLeft: '1px solid '+LayoutColors.black,

    ':hover': {}
};

var mainStyle = {
    backgroundColor: LayoutColors.black
};

var youtubeStyle = {
    height: LayoutSizes.playerHeightSmall,
    position: 'relative',
    zIndex: 2
};

module.exports = Radium(Player);

var React=require（'React'）；
var镭=需要（‘镭’）；
var=require（'下划线'）；
var Utils=require（'../../Utils/Utils'）；
/***常数***/
var LayoutColors=require（'../../constants/LayoutColors'）；
var LayoutSizes=require（'../../constants/LayoutSizes'）；
var LayoutFonts=require（'../../constants/LayoutFonts'）；
/***组成部分***/
var PlayerSize=require（'./PlayerSize'）；
var YouTube=require（'../YouTube/YouTube'）；
var PlayerControlsTop=require（'./PlayerControlsTop'）；
var PlayerControlsBottom=需要（'./PlayerControlsBottom'）；
var PlayerHeader=require（'./PlayerHeader'）；
var PlayerSource=require（'./PlayerSource'）；
/***通量***/
var PlayerStore=require（'../../stores/PlayerStore'）；
var PlayerActions=require（“../../actions/PlayerActions”）；
var Player=React.createClass({
道具类型：{
},
getDefaultProps:function（）{
返回{}；
},
getInitialState:函数（）{
return PlayerStore.getState（）；
},
componentWillMount:function（）{
//PlayerActions.setSource（this.props.id、this.props.type、this.props.playingTrack）；
},
组件将接收道具：函数（下一步）{
/*
if（nextrops.id！=this.props.id
||nextProps.type！=此.props.type）{
PlayerActions.setSource（nextrops.id、nextrops.type、nextrops.playingTrack）；
}
否则如果（！.isEqual（nextrops.playingTrack，this.state.playingTrack））{
PlayerActions.setSource（nextrops.id、nextrops.type、nextrops.playingTrack）；
}
*/
},
componentDidMount:function（）{
PlayerStore.听（这个.onChange）；
},
componentWillUnmount:函数（）{
//可能回到这里…永远不需要卸载
//PlayerActions.unMount（）；
PlayerStore.unlisten（this.onChange）；
},
onChange:function（）{
var-toSet=PlayerStore.getState（）；
console.log（“###########1#####”）；
控制台日志（toSet）；
本.设置状态（toSet）；
},
/***Youtube事件***/
onReady：函数（事件）{
PlayerActions.setPlayer（event.target）；
},
onDestroy:函数（）{
log（'onDestroy（）'）；
//PlayerActions.setPlayer（空）；
},  
onProgressBarChange：功能（当前、总计、perc）{
PlayerActions.setProgressBar（当前、总计、perc）；
},
onPlay:function（）{
PlayerActions.setPlaying（true）；
},
onPause:function（）{
PlayerActions.setPlaying（假）；
},
onEnd:function（）{
PlayerActions.forward（）；
},
/***渲染***/
render:function（）{
控制台。日志（“###########2####”）；
console.log（this.state）；
var hover=Radium.getState（this.state，'player'，'：hover'）；
变量youtubeOptions={
高度：“100%”，
宽度：“100%”，
PlayerBars:{//https://developers.google.com/youtube/player_parameters
开始：this.state.start，
自动播放：1，
骗局