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

나는 그것을 반작용 성분의 배열을 통과 할 때 오류가 발생했습니다 때문에 별도의 사업부입니다.

나는 이것을 다른 구성 요소와 함께 시도해 볼 때마다 비슷한 오류가 발생합니다. 또한 개별 구성 요소 안에있을 때 그리드가 작동합니다.

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

여기 스테퍼 내 용기는 참조 용입니다 :

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 있습니다. 내부적으로 redux와 그리드 구성 요소 renders its own Provider을 사용하여 애플리케이션 공급자를 대체합니다. 그래서 Stepper는 당신 대신 Grid의 저장소를 얻습니다. 그래서 currentStep에 대해 알지 못합니다.

이 문제를 해결할 수있는 해결 방법이 없습니다. 그러나 the issue에는 대체 솔루션에 대한 의견이 있습니다.

Answer 2

내가 생각

포장 앱은 상점을 손 바이더입니다 이것 일 수도 있습니다, 그냥 소품으로 슈퍼를 부르세요.

constructor(props) { 
    super(props); 
}