<Grid>（反応インライングリッド）でラップするとコンポーネントが店舗にアクセスできない

Question

反応インライングリッドを使用していて、コンポーネントをでラップすると、ラップされたコンポーネントは店舗へのアクセスを失うようです：

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です。

私はこれをさまざまなコンポーネントで試し、毎回同様のエラーが発生しました。また、グリッドは、個々のコンポーネントの内部にあるときに機能します。

ラッピングのAppストアダウンその手のプロバイダーです：

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

injectTapEventPlugin(); 

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

ここステッピングのための私の容器は、参考のためです：

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; 

とコンポーネント：

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

あなたが使用しているreact-inline-gridライブラリのあるproblemがあります。内部的にはreduxとグリッドコンポーネントrenders its own Providerが使用され、アプリケーションのプロバイダをオーバーライドします。だからステッパーはあなたの代わりにグリッドの店を手に入れます。だからそれは約currentStepについて知りません。

私はこれに対処するための回避策はありません。しかし、代替ソリューションについてはthe issueにコメントがあります。

Answer 2

私はそれを考えますそれは可能でしょう、ちょうど小道具とスーパーを呼び出します。

constructor(props) { 
    super(props); 
}