Các thành phần mất quyền truy cập để lưu trữ khi được bọc trong <Grid> (phản ứng nội dòng)

Question

Tôi đang sử dụng lưới phản ứng nội tuyến và ngay khi tôi bọc các thành phần của mình với <Grid>, các thành phần được bọc dường như mất quyền truy cập vào cửa hàng :

Uncaught TypeError: Cannot read property 'currentStep' of undefined

mã:

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

các div thêm là vì ném một lỗi khi tôi đi ngang qua nó một mảng của Phản ứng linh kiện.

Tôi đã thử điều này với các thành phần khác nhau và nhận được lỗi tương tự mỗi lần. Ngoài ra, lưới hoạt động khi tôi ở trong một thành phần riêng lẻ.

Wrapping App là một nhà cung cấp mà bàn tay xuống các cửa hàng:

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

injectTapEventPlugin(); 

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

Dưới đây là container của tôi cho stepper để tham khảo:

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; 

Và thành phần:

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

Có thư viện điện lưới-phản ứng nội tuyến mà bạn đang sử dụng. Nó sử dụng nội bộ redux và Grid thành phần renders its own Provider ghi đè nhà cung cấp ứng dụng của bạn. Vì vậy, Stepper được cửa hàng của Grid thay vì của bạn. Đó là lý do tại sao nó không biết về currentStep.

Tôi không có cách giải quyết để giải quyết vấn đề này. Nhưng the issue có một bình luận về một giải pháp thay thế.

Answer 2

Tôi nghĩ rằng nó có thể là điều này, chỉ cần gọi siêu với đạo cụ.

constructor(props) { 
    super(props); 
}