我正在使用 react-inline-grid，一旦我用 <Grid> 包装我的组件，包装的组件似乎失去了对商店的访问权限:

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 是因为当我向它传递一个 React 组件数组时抛出了一个错误。

我尝试使用不同的组件进行此操作，但每次都出现类似的错误。此外，当我在单个组件内时，网格会起作用。

Wrapping App 是一个传递商店的提供者:

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

injectTapEventPlugin();

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

这是我的 Stepper 容器供引用:

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;

最佳答案

有一个problem使用您正在使用的 react-inline-grid 库。它内部使用了 redux 和 Grid 组件 renders its own Provider它会覆盖您的应用程序的提供者。所以 Stepper 得到 Grid 的商店而不是你的。这就是它不知道 currentStep 的原因。

我没有解决这个问题的方法。但是the issue对替代解决方案有意见。

关于javascript - 当包装在 <Grid> 中时，组件将失去对存储的访问权限(react-inline-grid)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43927596/