Bileşenler(tepkisel satır içi) sarıldığında depolamaya erişim kaybediyor

Question

Tepki satır içi kılavuzunu kullanıyorum ve bileşenleri <Grid> ile sardığım anda, sarılı bileşenlerin mağazaya erişimini kaybedecek gibi görünüyor :

Uncaught TypeError: Cannot read property 'currentStep' of undefined

kodu:

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

ben o tepki bileşenlerin bir dizi geçtiğinde bir hata attı çünkü ekstra div olduğunu.

Bunu farklı bileşenlerle denedim ve her seferinde benzer bir hata alıyorum. Ayrıca, ızgara tek bir bileşenin içinde olduğumda çalışır.

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; 

Ve bileşeni:

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

injectTapEventPlugin(); 

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

İşte Step benim konteyner referans için verilmiştir:

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

kullandığınız tepki-inline-grid kütüphanesi ile bir problem yoktur. Dahili olarak, uygulamanızın sağlayıcısını geçersiz kılan redux ve Grid bileşeni olan renders its own Provider'u kullanır. Yani Stepper senin yerine Grid'in dükkanını alır. Bu yüzden currentStep hakkında bilmiyor.

Bununla başa çıkmak için bir geçici çözümüm yok. Ancak the issue alternatif bir çözüm hakkında yorum yaptı.

Answer 2

öyle düşünüyorum

Paketleme App store eller aşağı bir Sağlayıcısıdır Bu olabilir, sadece sahne ile süper arayın.

constructor(props) { 
    super(props); 
}