javascript - 我可以访问组件状态中的 redux props/应用程序状态吗

Question

假设我已将衣服添加到后端 Rails api，并且我尝试通过 React 端访问这些元素，我知道我可以使用 mapStateToProps(state){} 函数。但是，我想在来自 reducer (或 redux 存储)的不同应用程序状态之间的 UI 中创建交互性，其中不同状态之间的交互性取决于组件构造函数中的当前状态。我是否可以在构造函数中访问 this.props.contemplatedPiece ？ Babel 告诉我模块构建失败:SyntaxError: Unexpected token.

constructor(props){
    super(props);
    this.props.getInitialPieces();
        this.state = {
            if (this.props.contemplatedPiece.merch_type == 'top'){
                currentLowerComponent: this.props.suggestedBottoms[0],
                currentUpperComponent: this.props.contemplatedPiece,
                LowerComponents, UpperComponents: this.props.organizePieces();
            }
            else if (this.props.contemplatedPiece.merch_type == 'bottom'){
                currentLowerComponent: this.props.contemplatedPiece,
                currentUpperComponent: this.props.suggestedTops[0],
                UpperComponents, LowerComponents: this.props.organizePieces();
            }
            currentComponent: {whichComponent: null, whichPiece: null}
            UpperComponentEnabled: false,
            LowerComponentEnabled: false
        };
};


isOppositeComponentSuggested(whichComponent){
        var match = false;
        _.debounce((whichComponent) => {
            this.props.setContemplatedPiece(whichComponent).then(function(){
                this.props.getAncillaryPieces();
                if (this.props.contemplatedPiece.merch_type == 'top'){
                    this.props.suggestedBottoms.map((bottom) => {
                        if (this.state.currentLowerComponent == bottom){
                                match = true;
                        }
                    });
                }
                else if (this.props.contemplatedPiece.merch_type == 'bottom'){
                    this.props.suggestedTops.map((top) => {
                        if (this.state.currentUpperComponent == top){
                            match = true;
                        }               
                    });
                }
            });
        }, 6000);

        return match;
    }

    switchFocus(){
        if (this.state.currentUpperComponent.hasFocus()){
            this.state.currentLowerComponent.focus();
        }
        else if(this.state.currentLowerComponent.hasFocus()){       
            this.state.currentUpperComponent.focus();   
        }
        else {
          break;
        }
    }

    render(){
         return(
               <Wardrobe upperComponent={this.state.currentUpperComponent} lowerComponent={this.state.currentLowerComponent} currentComponent = {this.state.currentComponent} enableCapture={snapshot => this.snapshotMatch = snapshot} />
               <div className = "PossibleMatches_Container">
                    <i class = 'captureOutfit' onClick = {this.snapshotMatch}></i> 
                    {this.state.fieldForOrganizedPiecesArray.UpperComponents.map(function(topPiece){  
                        <UpperComponent key={topPiece.id} id={topPiece.id} ref={(piece)=>{this.setState({currentUpperComponent: piece})}} setCurrentComponent = {(piece) => this.setState(currentComponent.whichPiece: piece, currentComponent.whichComponent: 'u', lowerComponent: null, upperComponent: null)}  toggleToPiece={this.setState({currentLowerComponent: this.props.suggestedBottoms[0]}).then(function(){if (this.state.LowerComponentEnabled: false){this.setState(LowerComponentEnabled: true)}else{break;}})} image={topPiece.image} isLowerComponentEnabled={this.state.LowerComponentEnabled} switchComponent={this.switchFocus} evaluatePiece={isOppositeComponentSuggested} className={if (this.state.currentComponent.whichComponent == 'l'){'standalonePiece'}else if(this.state.currentComponent.whichComponent == 'l'){'PossibleMatchCollapse'} else{'UpperComponent_Container'}}/>
                    });}
                    {this.state.fieldForOrganizedPiecesArray.LowerComponents.map(function(bottomPiece){
                        <LowerComponent key={bottomPiece.id} id={bottomPiece.id} ref={(piece)=>{this.setState({currentLowerComponent: piece})}} setCurrentComponent = {(piece) => this.setState(currentComponent.whichPiece: piece, currentComponent.whichComponent: 'l', upperComponent: null, lowerComponent: null);}  toggleToPiece={this.setState({currentUpperComponent: this.props.suggestedTops[0]}).then(function(){if(this.state.UpperComponentEnabled: false){this.setState(UpperComponentEnabled: true)}})} isUpperComponentEnabled={this.state.UpperComponentEnabled} switchComponent={this.switchFocus} evaluatePiece={isOppositeComponentSuggested} className={ if (this.state.currentComponent.whichComponent == 'l'){'standalonePiece'} else if(this.state.currentComponent.whichComponent == 'u'){'PossibleMatchCollapse'} else{'LowerComponent_Container'}}/>
                    });}
                </div>
         );
    }
}


function mapStateToProps(state){
    return {
        contemplatedPiece: state.possibleMatches.contemplated_piece,
        extraTops: state.possibleMatches.extraTops,
        extraBottoms: state.possibleMatches.extraBottoms,
        standaloneTops: state.possibleMatches.standaloneTops,
        standaloneBottoms: state.possibleMatches.standaloneBottoms,
        suggestedTops: state.possibleMatches.suggestedTops,
        suggestedBottoms: state.possibleMatches.suggestedBottoms,
        UpperComponents: state.possibleMatches.UpperComponents,
        LowerComponents: state.possibleMatches.LowerComponents
    };
}

这是其余的代码

Answer 1

首先，我想指出代码中的一些 javascript 无效表达式:

constructor(){
    // To properly access to `this.props` in the Component constructor you must call the `super`
    this.props.getInitialPieces();
    this.state = {
        // next lines is invalid on object initialization
        // use instead the ternary operator `?:`
        if (this.props.contemplatedPiece.merch_type == 'top'){ // <-- error: invalid syntax (if statement is invalid here)
           currentLowerComponent: this.props.suggestedBottoms[0],
           currentUpperComponent: this.props.contemplatedPiece,
           LowerComponents, UpperComponents: this.props.organizePieces();
        }
}

也许你需要这样做:

class MyComponent extends React.Component {
    constructor(props){
        super(props); // constructor receive `props`, need to call `super`
        props.getInitialPieces();
        const condition = props.contemplatedPiece.merch_type == 'top';
        this.state = {
           currentLowerComponent: condition ? this.props.suggestedBottoms[0] : undefined,
           // same logic with conditional props
        };
    }
}

<小时/>

SyntaxError: this is a reserved word

出现新错误是因为在对象声明中您必须指示 propName: value:

{ 
    propsA: valueA,
    propB: this.props.organizePieces().map(function(results){})
}

这里是对更新代码的一些修订/修复，但我建议您阅读 javascript 语言规范并做一些教程来习惯它。

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.getInitialPieces();

        // this change is related of using an inline map function inline in the object, with no target property to assign the result.
        // E.g. Correct syntax { prop: this.props.organizePieces().map() }
        const organizedPiecesArray = this.props.organizePieces().map(function(results) {
            // need to `return` an Object:
            return {
                UpperComponents: results.PossibleMatches.UpperComponents,
                LowerComponents: results.PossibleMatches.LowerComponents
            };
        });

        const initialState = {
            // define property to hold the mapped `organizedPiecesArray`
            fieldForOrganizedPiecesArray: organizedPiecesArray,
            currentComponent: { whichComponent: null, whichPiece: null },
            UpperComponentEnabled: false,
            LowerComponentEnabled: false
        };

        if (this.props.contemplatedPiece.merch_type === 'top') {
            this.state = {
                ...initialState, // spread `initialState` to copy their properties
                currentLowerComponent: this.props.suggestedBottoms[0],
                currentUpperComponent: this.props.contemplatedPiece,
            };
        } else if (this.props.contemplatedPiece.merch_type === 'bottom') {
            this.state = {
                ...initialState,
                currentLowerComponent: this.props.contemplatedPiece,
                currentUpperComponent: this.props.suggestedTops[0],
            };
        } else {
            // if it's possible a third alternative, what's the initial state here?
        }
    }
}

相关资源:

• 检查您的 JavaScript 代码 here
• 了解有关 ternary operator 的更多信息
• 检查React Component constructor文档
• JavaScript basics