Question

所以，让我们说我已经在后端的铁路api中添加了衣服，我试图通过React方面访问这些项目，我知道我可以使用mapStateToProps（状态） {}功能。但是，我想在UI中创建不同应用程序状态之间的交互性，这些应用程序状态来自reducers（或redux store），其中不同状态块之间的交互性依赖于组件构造函数中的当前状态。我可以在构造函数中访问this.props.contemplatedPiece吗？ Babel告诉我模块构建失败：SyntaxError：意外的令牌。

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：这是一个保留字

发生新错误是因为在对象声明中您必须指出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

Answer 2

是的！您的React组件类在其构造函数中接收print(spacy.__file__：

props

参考：https://reactjs.org/docs/react-component.html#constructor

Answer 3

您收到此错误是因为您在对象文字中有一个if块。这不是有效的JavaScript。您只能在对象文字中包含键/值对：

this.state = {
    // this is an object
    // no 'if' allowed here
    // key: value
    myKey: myValue,
};

mapStateToProps函数也不应该是组件实例的成员。它是一个函数，它将当前的redux状态作为参数，并返回应该传递给组件的props。您必须将它与redux connect()函数一起使用：

const mapStateToProps = state => ({
    myProp: state.aProp,
});

const MyConnectedComponent = connect(mapStateToProps)(MyComponent);

在我看来，你应该先从redux教程开始。

另外，反应组件的构造函数必须使用super调用它的props构造函数，否则组件将会中断：

constructor(props){
    // you must call super here
    super(props);

    // additional initialization here
}

当然，您可以使用传递给构造函数的props来正确初始化您的状态。

Answer 4

你的语法错误这是一个保留字，可能与：

有关

this.state = {
    currentLowerComponent: this.props.suggestedBottoms[0],
    currentUpperComponent: this.props.contemplatedPiece,
    this.props.organizePieces().map(function(results){ <-- Error
        UpperComponents: results.PossibleMatches.UpperComponents;
        LowerComponents: results.PossibleMatches.LowerComponents;
    });
    currentComponent: {whichComponent: null, whichPiece: null}
    UpperComponentEnabled: false,
    LowerComponentEnabled: false
}

this.state = {}是一个Object Literal，您可以在此Object中为属性赋值。

在this.state中的第3行，你试图分配map函数的结果（它会返回一个数组，（实际上它什么都不返回，因为你没有返回任何东西）），实际上没什么：D，你只是称之为。所以它在第一个点之后断开，然后它只是尝试分配“this”，但是这是保留的。（我本来期望一个不同的错误，虽然可能是意外的令牌，但它可能是babel因为这个错误而没有正确转换）并且给出了这个错误。

this.state = {
    currentLowerComponent: this.props.suggestedBottoms[0],
    currentUpperComponent: this.props.contemplatedPiece,
    whatever: this.props.organizePieces().map(results => ({ 
        UpperComponents: results.PossibleMatches.UpperComponents,
        LowerComponents: results.PossibleMatches.LowerComponents,
    })), <-- No Error
    currentComponent: {whichComponent: null, whichPiece: null},
    UpperComponentEnabled: false,
    LowerComponentEnabled: false
}

没有错误：假设organizationalPieces（）＆lt; - 是一个返回数组的函数。
你也不能用;在对象文字中
不要忘记每个值的末尾
你应该在任何其他声明之前调用super（props）。否则，this.props将在构造函数中未定义，这可能导致错误。

我可以访问组件状态中的redux props / application状态

4 个答案: