Komponenty tracą dostęp do sklepu po zapakowaniu w <Grid> (reagują-inline-grid)

Question

Używam systemu reagujących inline-grid i jak tylko opakuję moje komponenty za pomocą <Grid>, zawinięte komponenty tracą dostęp do sklepu :

Uncaught TypeError: Cannot read property 'currentStep' of undefined

Kod:

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); 

dodatkowy div dlatego wyrzucił błąd, gdy zdałem mu tablicę reagować komponentów.

Próbowałem tego z różnymi komponentami i za każdym razem otrzymuję podobny błąd. Ponadto siatka działa, gdy znajduję się wewnątrz pojedynczego elementu.

Wrapping App jest Provider, że ręce w dół do sklepu:

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

injectTapEventPlugin(); 

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

Oto mój pojemnik na Stepper dla odniesienia:

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; 

i komponent:

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

Jest problem z biblioteką reagować-inline-grid, którego używasz. Wewnętrznie używa redux i komponentu Grid renders its own Provider, który zastępuje dostawcę aplikacji. Więc Stepper dostaje sklep Grida zamiast twojego. Dlatego nie wie o currentStep.

Nie mam obejścia, aby sobie z tym poradzić. Ale the issue ma komentarz na temat alternatywnego rozwiązania.

Answer 2

myślę, że może to być, po prostu zadzwoń super z rekwizytami.

constructor(props) { 
    super(props); 
}