Material UI SelectField 组件与状态不同步（使用 React/Redux）

Question

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

但是，在生产中，当您选择布局时，视图中的其他更改会反映新状态，但菜单会显示最初存在的布局。如果您单击另一个步骤并返回，布局表单将显示当前（正确）布局。

此外，Redux DevTools 显示状态已正确更改。

我将布局选择器传递给 props，如下所示：

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

与开发环境相比，有两件事会影响您的生产：

1. 如果您使用的是 webpack，您的生产配置可能与您在开发环境中捆绑使用的配置不同。这种生产配置确实会产生副作用。 因为您使用 create-react-app 创建了应用程序，该应用程序使用了在幕后使用 webpack 并允许您自定义它的反应脚本。

2. 确保您在 dev 和生产或事件中安装相同的包，您可以使用 npm shrinkwrap 冻结依赖项

3. 你可以看到如何在没有ejecting 的情况下自定义 webpack 配置。这里的问题是，一旦您使用 create-react-app 脚本创建应用程序，您就会“继承”大量配置，这也可能导致错误（并且可能需要进行不同的配置）。

Answer 2

请检查软件包的版本。你可以在你的开发服务器中安装不同版本的 React，在产品服务器中安装不同的版本。

你使用了 prop 类型，它在最新版本的 React 中被贬值了。

Answer 3

您说您仅在生产构建中存在错误，而您的本地构建工作正常。

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

所以我的建议是确保您在本地 node_modules 和构建机器上（以防万一）拥有相同版本的 material-ui。