<Grid> (प्रतिक्रिया-इनलाइन-ग्रिड) में लपेटे जाने पर घटक स्टोर तक पहुंच खो देते हैं

Question

मैं प्रतिक्रिया-इनलाइन-ग्रिड का उपयोग कर रहा हूं और जैसे ही मैं अपने घटकों को <Grid> के साथ लपेटता हूं, लिपटे हुए घटक स्टोर तक पहुंच को खो देते हैं :

Uncaught TypeError: Cannot read property 'currentStep' of undefined

कोड:

class App extends Component { 

    componentDidMount() { 
     const { dispatch } = this.props; 
     dispatch(loadData()); 
    } 

    render() { 
     return (
      <div> 
       <Grid> 
         <Row> 
          <Cell> 
           <Stepper /> 
          </Cell> 
         </Row> 
       </Grid> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = state => ({ 
    app: state.app 
}); 

export default connect(mapStateToProps)(App); 

अतिरिक्त div क्योंकि एक त्रुटि फेंक दिया जब मैं यह घटकों प्रतिक्रिया की एक सरणी से पारित कर दिया है।

मैंने इसे विभिन्न घटकों के साथ करने की कोशिश की और हर बार एक समान त्रुटि प्राप्त की। इसके अलावा, जब मैं एक व्यक्तिगत घटक के अंदर होता हूं तो ग्रिड काम करता है।

import { connect } from 'react-redux'; 
import AppStepper from '../components/Stepper/AppStepper'; 
import { selectStep, postNotification } from '../actions'; 

function handleChange(value, dispatch) { 
    dispatch(selectStep(value)); 
    if (value === 2 || value === 3) { 
     dispatch(postNotification('Coming soon!')); 
    } 
} 

const mapStateToProps = (state, ownProps) => ({ 
    currentStep: state.app.currentStep 
}); 

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    handleChange: (value) => { 
     handleChange(value, dispatch); 
    } 
}); 

const Stepper = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(AppStepper); 

export default Stepper; 

और घटक:

const MaterialApp =() => (
    <MuiThemeProvider> 
     <App /> 
    </MuiThemeProvider> 
); 

injectTapEventPlugin(); 

ReactDOM.render(
    <Provider store={store}> 
    <MaterialApp /> 
    </Provider>, 
    document.getElementById('root') 
); 

यहाँ संदर्भ के लिए Stepper के लिए मेरे कंटेनर है:

import React, { Component } from 'react'; 
import { 
    Step, 
    Stepper, 
    StepButton, 
} from 'material-ui/Stepper'; 
import PropTypes from 'prop-types'; 

class AppStepper extends Component { 

    constructor(props) { 
     super(); 
    } 

    render() { 
     const currentStep = this.props.currentStep; 
     const onChange = this.props.handleChange; 

    return (
     <div style={{width: '100%', maxWidth: 700}}> 
     <Stepper linear={false} activeStep={currentStep}> 
      <Step> 
      <StepButton onClick={() => onChange(0)}> 
       Import Data 
      </StepButton> 
      </Step> 
      <Step> 
      <StepButton onClick={() => onChange(1)}> 
       Select Layout 
      </StepButton> 
      </Step> 
      <Step> 
      <StepButton onClick={() => onChange(2)}> 
       Finalize Layout 
      </StepButton> 
      </Step> 
        <Step> 
      <StepButton onClick={() => onChange(3)}> 
       Export 
      </StepButton> 
      </Step> 
     </Stepper> 
     </div> 
    ); 
    } 
} 

export default AppStepper; 

Answer 1

प्रतिक्रिया-इनलाइन ग्रिड पुस्तकालय है कि आप प्रयोग कर रहे हैं के साथ एक problem नहीं है। यह आंतरिक रूप से रेडक्स और ग्रिड घटक renders its own Provider का उपयोग करता है जो आपके एप्लिकेशन के प्रदाता को ओवरराइड करता है। तो स्टेपर को आपकी बजाय ग्रिड की दुकान मिलती है। यही कारण है कि यह currentStep के बारे में नहीं जानता है।

मेरे पास इस से निपटने के लिए कोई समाधान नहीं है। लेकिन the issue में एक वैकल्पिक समाधान के बारे में एक टिप्पणी है।

Answer 2

मैं इसे लगता है

रैपिंग अनुप्रयोग एक प्रदाता है कि नीचे की दुकान हाथ है यह हो सकता है, प्रोप के साथ बस सुपर कॉल करें।

constructor(props) { 
    super(props); 
}