JSX undefined variable

Question

Ich habe den folgenden Code:

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); 

Und aus irgendeinem Grund die row div außerhalb de wenn Gültigkeitsbereich deklariert wird, und so zur Laufzeit I

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

Der Code nach transpilation erhalten sieht ungefähr so ​​aus:

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(); 

Bitte beachten Sie, wie alles außerhalb der erklärt wird wenn Aussage.

Ich verwende webpack 2.1.0-beta.12 und reagieren 15.3.2

Answer 1

A refactor nur das Problem behoben.

Ich habe einige forEach Schleifen geändert, die Elemente zu einem Array hinzugefügt, zu Karten, die das gleiche Array und alles funktioniert ok. Insbesondere :

foundMovements.forEach

und

movement.productGroups().forEach

Sehr seltsam, sollte dies ein webpack oder babel Fehler. Irgendwelche Vorschläge?