【发布时间】：2015-07-07 09:11:15
【问题描述】：
我刚刚使用 NPM 更新了我的项目，我不清楚是什么导致了以下错误。 prefixer.js 来自镭。
未捕获的类型错误：无法读取未定义的属性“toString”-prefixer.js:173
_getPrefixedValue@prefixer.js:173(匿名函数)@ prefixer.js:275getPrefixedStyle@prefixer.js:261resolveStyles@ resolve-styles.js:215（匿名函数）@ resolve-styles.js:154mapSingleChildIntoContext @ ReactChildren.js:97traverseAllChildrenImpl @ traverseAllChildren.js:111traverseAllChildrenImpl @ traverseAllChildren.js:133traverseAllChildren @ traverseAllChildren.js:246mapChildren @ ReactChildren.js:123resolveStyles@resolve-styles.js:152render@ 增强器.js:34_renderValidatedComponentWithoutOwnerOrContext @ 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 @ ReactDOMComponent.js:199mountComponent @ ReactReconciler.js:38mountComponent @ ReactCompositeComponent.js:247wrapper @ ReactPerf.js:70mountComponent @ReactReconciler.js:38_updateRenderedComponent @ ReactCompositeComponent.js:764_performComponentUpdate @ ReactCompositeComponent.js:726updateComponent @ ReactCompositeComponent.js:642wrapper @ ReactPerf.js:70performUpdateIfNecessary @ ReactCompositeComponent.js:539performUpdateIfNecessary @ ReactReconciler.js:115runBatchedUpdates @ ReactUpdates.js:151perform @ Transaction.js:134perform@Transaction.js:134perform@ ReactUpdates.js:95flushBatchedUpdates @ ReactUpdates.js:175wrapper @ ReactPerf.js:70closeAll@Transaction.js:207perform@ Transaction.js:148batchedUpdates @ ReactDefaultBatchingStrategy.js:66enqueueUpdate @ ReactUpdates.js:215enqueueUpdate @ ReactUpdateQueue.js:30enqueueSetState @ ReactUpdateQueue.js:208ReactComponent.setState @ ReactComponent.js:69onChange @ Player.js:61emit @ index.js:72AltStore.emitChange@AltStore.js:54（匿名函数）@ AltStore.js:84Dispatcher.$Dispatcher_invokeCallback @ Dispatcher.js:220Dispatcher.dispatch @ 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:3099fireWith@ 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);
【问题讨论】：
标签： reactjs inline-styles