javascript - Material UI SelectField 组件与状态不同步(使用 React/Redux)

Question

我有一个组件 LayoutSelector，它带有一个更新 state.plate.layout 的下拉表单。状态作为 Prop 传递给组件。在我的机器上，选中的菜单项在状态改变后与我的状态保持同步——当用户选择一个新的布局时，表单显示布局:

但是，在生产中，当您选择布局时， View 中的其他更改会反射(reflect)新状态，但菜单会显示最初的布局。如果您单击另一个步骤然后返回，布局表单将显示当前(正确的)布局。

此外，Redux DevTools 向我展示了状态已正确更改。

我按如下方式将 Prop 传递给布局选择器:

value={this.props.layout}

这是我的组件:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import Paper from 'material-ui/Paper';
import { Grid, Row } from 'react-inline-grid';

class LayoutSelector extends Component {

    render() {
        const handleChange = (event, index, value) => this.props.handleLayoutChange(value);
        const style = {
            height: 130,
            width: 650,
            margin: 10,
            textAlign: 'left',
            display: 'inline-block'
        };
        return (
            <div style={{ marginLeft: '20px', topPadding: '0px', topMargin: '0px' }}>
                <Paper zDepth={1} style={style}>
                    <Grid>
                        <Row>
                            <SelectField
                                floatingLabelText="Layout"
                                value={this.props.layout}
                                onChange={handleChange}
                                style={{ marginLeft: '20px', topPadding: '0px', topMargin: '0px' }}
                            >
                                <MenuItem value={'listorder'} primaryText="List Order" />
                                <MenuItem value={'roundrobin'} primaryText="Round Robin" />
                                <MenuItem value={'random'} primaryText="Random" />
                                <MenuItem value={'spreadsample'} primaryText="Spread Sample" />
                            </SelectField>
                            <p style={{ marginLeft: '10px', verticalAlign: 'middle', topMargin: '30px' }}><i>{this.props.description}</i> </p>
                        </Row>
                    </Grid>
                </Paper>
            </div>
        );
    }
}

LayoutSelector.propTypes = {
    layout: PropTypes.string.isRequired,
    handleLayoutChange: PropTypes.func.isRequired,
    description: PropTypes.string
};

LayoutSelector.defaultProps = {
    description: ''
};

export default LayoutSelector;

这是容器:

import { connect } from 'react-redux';
import { changeLayout, showLayer, showSample, postNotification, clearUserChanges } from '../actions';
import LayoutSelector from '../components/Stepper/Steps/LayoutSelector';
import { getAttributes } from '../selectors/samples';
import { getDescription } from '../selectors/layout';

function handleLayoutChange(value, dispatch) {
    dispatch(changeLayout(value));
    dispatch(clearUserChanges());
    dispatch(postNotification(`New layout chosen: ${value}`));
}

function handleSampleVisChange(e, dispatch) {
    dispatch(showSample(e.target.checked));
}

function handleAttrVisChange(e, dispatch) {
    dispatch(showLayer(e.target.value, e.target.checked));
}

const mapStateToProps = (state, ownProps) => ({
    attributes: getAttributes(state),
    showSample: state.plate.showSample,
    layout: state.plate.layout,
    visibleAttribute: state.plate.visibleAttribute,
    description: getDescription(state)
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    handleLayoutChange: (values) => {
        handleLayoutChange(values, dispatch);
    },
    handleSampleVisChange: (values) => {
        handleSampleVisChange(values, dispatch);
    },
    handleAttrVisChange: (values) => {
        handleAttrVisChange(values, dispatch);
    }
});

const LayoutForm = connect(
    mapStateToProps,
    mapDispatchToProps
)(LayoutSelector);

export default LayoutForm;

我最困惑的是为什么这在开发中可以完美运行，但在生产中却不行。这是我注意到的唯一区别。我的 package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "material-ui": "^0.18.3",
    "ndarray": "^1.0.18",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-cellblock": "^3.0.0",
    "react-dom": "^15.6.1",
    "react-flexbox-grid": "^1.1.3",
    "react-inline-grid": "^0.5.3",
    "react-redux": "^5.0.5",
    "react-router": "^3.0.5",
    "react-tap-event-plugin": "^2.0.1",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^6.8.0",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "react-scripts": "^0.8.5",
    "underscore": "^1.8.3",
    "redux": "^3.7.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-config-react-app": "^0.6.2",
    "eslint-plugin-flowtype": "^2.32.1",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "test:watch": "npm test -- --watch"
  }
}

Answer 1

你说你只在生产构建中有错误，而你的本地构建工作正常。

我在 material-ui source-code 中没有看到任何基于环境的行为显着改变.

因此，我的建议是确保您在本地 node_modules 和构建机器(如果您有)中拥有相同版本的 material-ui。