Question

我使用react-inline-grid，只要我用<Grid>包装我的组件，包装的组件就会失去对商店的访问权限：

未捕获的TypeError：无法读取属性＆＃39; currentStep＆＃39;未定义的

代码：

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库的problem。它在内部使用redux和Grid组件renders its own Provider，它覆盖了应用程序的提供程序。所以Stepper得到了Grid的商店而不是你的商店。这就是为什么它不了解currentStep。

我没有办法解决这个问题。但the issue对替代解决方案有评论。

Answer 2

我认为可能是这个，只需用道具打电话给超级。

constructor(props) {
    super(props);
}

包裹在<grid>中的组件失去对商店的访问权限（react-inline-grid）

2 个答案: