Question

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

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

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

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

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

你说你只在生产版本中有bug，而你的本地版本工作正常。

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

因此，我的建议是确保您在本地material-ui和构建计算机上拥有相同版本的node_modules（如果您有任何版本）。

Answer 2

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

您使用的是prop类型，它在最新版本的React中被折旧。

Answer 3

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

如果您使用的是网络包，那么您的生产配置可能与您在开发环境中捆绑的生产配置不同。这种生产配置确实会产生副作用。因为您使用create-react-app创建了应用程序，该应用程序使用在幕后使用webpack的反应脚本，并允许您自定义它。
确保您在dev和生产或事件中安装相同的软件包，您可以使用npm shrinkwrap来冻结依赖项
您可以看到如何在没有ejecting的情况下自定义webpack配置。这里的问题是，一旦您使用create-react-app脚本创建应用程序，您就会继承＆＃34;继承＆＃34;大量的配置也可能导致错误（可能需要进行不同的配置）。

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

3 个答案: