包裹在<Grid>中时,组件将失去对商店的访问权限(react-inline-grid)

Question

我正在使用react-inline-grid,当我用我的组件包装时<Grid>,包装的组件似乎无法访问商店:

未捕获的TypeError:无法读取未定义的属性"currentStep"

代码:

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组件数组时抛出一个错误.

我尝试使用不同的组件,每次都得到类似的错误.此外,当我在单个组件内时,网格也可以工作.

包装应用程序是一个提供商,提供商店:

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;

Answer 1

您使用的react-inline-grid 库有问题。它在内部使用 redux，并且 Grid 组件呈现自己的 Provider，该 Provider 会覆盖您的应用程序的提供程序。因此 Stepper 获得 Grid 的商店而不是您的商店。这就是为什么它不知道currentStep.

我没有解决方法来处理这个问题。但该问题有关于替代解决方案的评论。