Question

我有以下代码：

import React from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { bindActionCreators } from 'redux';
import Immutable from 'immutable';
import { createSelector } from 'reselect';
import Environment from './../../models/Environment';
import * as Models from './../../models/index';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import { List, ListItem } from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import { Card, CardHeader, CardText } from 'material-ui/Card';
import Avatar from 'material-ui/Avatar';
import transportTypeToIcon from '../../services/transportTypeToIcon.js';
import DateHelper from './../../helpers/DateHelper.js';
import Temp from './../../components/MapTemplate/index.js';
import TextField from 'material-ui/TextField';
import chileanRut from 'chilean-rut';
import {
  selectObjects,
  selectMovementId,
  selectGoogle,
  selectMap,
  selectSearchInput,
} from './selectors';

import * as movementsActions from './actions';

// import styles from './styles.css';

export class Movements extends React.Component {
  componentDidMount() {
    this.props.actions.loadMovements();
  }


  openRoute = (route) => {
    this.props.changeRoute(route);
  };
  openMovementPassportPage = (movementPassportId) => {
    this.openRoute(`/movementPassports/${movementPassportId}`);
  };

  render() {
    const { objects, actions, movementId, google, map, searchInput } = this.props;
    const env = new Environment({ objects: objects.toJS() }, Models);
    const foundMovements = env.parseDB().objects.movements.filter(m => searchInput && m.isNormal() && m.id.toString().includes(searchInput));
    let movementDetails = <div></div>;
    const movementsList = [];
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'decimal',
      minimumFractionDigits: 0,
    });


    // FR: movement list
    foundMovements.forEach((movement) => {
      const productGroups = movement.productGroups();
      const secondaryText = [];
      const origin = movement.origin();
      const destiny = movement.destiny();
      productGroups.forEach((productGroup) => {
        secondaryText.push(
          <span>
            {`
              ${productGroup.productSpec().product().name} 
              ${productGroup.productSpec().color} 
              ${formatter.format(productGroup.quantity())}
            `}m<sup>3</sup>
            <br />
          </span>);
      });
      movementsList.push(
        <ListItem
          leftAvatar={<Avatar>{transportTypeToIcon(movement.transport().transportType())}</Avatar>}
          primaryText={`#${movement.id}, ${origin.name} - ${destiny.name}, fecha: ${DateHelper.spanishDate(movement.date)}`}
          secondaryText={secondaryText}
          secondaryTextLines={2}
          onTouchTap={() => actions.showMovementDetails(movement.id, google, map, origin, destiny)}
        />
      );
    });


    // FR: modal
    if (movementId) {
      const movement = env.Movement.findBy('id', movementId);
      const origin = movement.origin();
      const destiny = movement.destiny();
      const transport = movement.transport();
      const driver = transport.driver();

      const productGroupsList = [];
      movement.productGroups().forEach((productGroup) => {
        const productSpec = productGroup.productSpec();
        const product = productSpec.product();
        productGroupsList.push(
          <ListItem
            leftAvatar={<Avatar><i className="fa fa-archive"></i></Avatar>}
            primaryText={<div>{`${product.name} - ${productGroup.quantity()}`}m<sup>3</sup></div>}
            secondaryText={productSpec.color}
            disabled
          />
        );
      });

      const dialogContent = (<Card>
        <CardHeader
          title={`GLT #${movement.id} - ${DateHelper.spanishDate(movement.date)}`}
          subtitle={`${origin.name} - ${destiny.name}`}
        />
        <CardText>
          <div className="row">
            <List>
              <Subheader>Conductor</Subheader>
              <ListItem
                leftAvatar={<Avatar><i className="fa fa-user"></i></Avatar>}
                primaryText={`${driver.name} - ${chileanRut.format(driver.taxNumber, true)}`}
                secondaryText={`${transport.licensePlate} - ${movement.phone}`}
                disabled
              />
              <Subheader>Contenido</Subheader>
              {productGroupsList}
              <Subheader>Mapa</Subheader>
            </List>
          </div>
          <div className="row">
            <div className="col-md-12">
              <Temp origin={origin} destiny={destiny} actions={actions} map={map} google={google} />
            </div>
          </div>
        </CardText>
      </Card>);

      movementDetails = (<Dialog
        open
        autoScrollBodyContent
        bodyStyle={{ paddingBottom: 80 }}
        bodyStyle={{ padding: 0 }}
        onRequestClose={() => actions.closeMovementDetails()}
      >
        {dialogContent}
      </Dialog>);
    }
    return (
      <div>
        <Card>
          <CardHeader
            title="Buscar por # de GLT"
          />
          <CardText>
            {movementDetails}
            <TextField
              hintText="Ingrese # de GLT"
              type="number"
              onChange={(event) => actions.searchInputChanged(event.target.value)}
            />
            {movementsList}
          </CardText>
        </Card>
      </div>
    );
  }
}

Movements.propTypes = {
  changeRoute: React.PropTypes.func,
  objects: React.PropTypes.instanceOf(Immutable.List),
  actions: React.PropTypes.object,
  loadMovements: React.PropTypes.func,
  movementId: React.PropTypes.integer,
  google: React.PropTypes.object,
  map: React.PropTypes.object,
  searchInput: React.PropTypes.string,
};

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(movementsActions, dispatch),
    changeRoute: (url) => dispatch(push(url)),
    dispatch,
  };
}

// Wrap the component to inject dispatch and state into it
export default connect(createSelector(selectObjects(), selectGoogle(), selectMap(), selectMovementId(), selectSearchInput(), (objects, google, map, movementId, searchInput) => ({ objects, google, map, movementId, searchInput })), mapDispatchToProps)(Movements);

由于某种原因，row div在范围之外被声明为de，因此在运行时我得到

3.96a4658….chunk.js:192 Uncaught (in promise) ReferenceError: origin is not defined

转换后的代码看起来像这样：

var _ref10 = _jsx('div', {
        className: 'row'
      }, void 0, _jsx('div', {
        className: 'col-md-12'
      }, void 0, _jsx(__WEBPACK_IMPORTED_MODULE_16__components_MapTemplate_index_js__["a" /* default */], {
        origin: origin,
        destiny: destiny,
        actions: actions,
        map: map,
        google: google
      })));

      if (movementId) {
        (function () {
          var _jsx2;

          var movement = env.Movement.findBy('id', movementId);
          var origin = movement.origin();
          var destiny = movement.destiny();
          var transport = movement.transport();
          var driver = transport.driver();

请注意如何在if语句之外声明所有内容。

我使用webpack 2.1.0-beta.12并做出反应15.3.2

Answer 1

重构只是解决了这个问题。

我已经更改了一些forEach循环，这些循环将项目添加到数组，更改为构建相同数组的映射，一切正常。具体来说：

foundMovements.forEach

和

movement.productGroups().forEach

很奇怪，这应该是一个webpack或babel错误。有什么建议吗？

JSX未定义变量

1 个答案: