React - 数组迭代:迭代数组时出现"'l'未定义"错误

Question

我是React的新手.我正在尝试使用google-map-react在Google地图上显示几个位置.

我正在使用以下来源.

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class GMap extends Component {

  static defaultProps = {
    center: {
      lat: 15.95,
      lng: 79.33
    },
    zoom: 7
  };

  componentWillMount() {
    var locations = [
      {lat: 16.16, lng: 80.80, name:'XYZ'},
      {lat: 14.14, lng: 77.77, name:'ABC'},
      {lat: 13.13, lng: 79.79, name:'CYZ'},
      {lat: 13.31, lng: 79.97, name:'EWWE'}];
      this.setState({loc:locations});
  }

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'AIzaSyDvsaENyQnSHWWGCI6JnLF8_-65Qv9sJaw' }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={this.state.loc[0].lat}
            lng={this.state.loc[0].lng}
            text={this.state.loc[0].name}
          />

          <AnyReactComponent
            lat={this.state.loc[1].lat}
            lng={this.state.loc[1].lng}
            text={this.state.loc[1].name}
          />

          this.state.loc.map(l => {
            <AnyReactComponent
            lat={l.lat}
            lng={l.lng}
            text={l.name}
          />
          });

          ));


        </GoogleMapReact>
      </div>
    );
  }
}

export default GMap;

当我运行"npm run start"运行我的应用程序时,我收到以下错误.

编译失败.

./src/GMap.js第48行:'l'未定义no-undef第49行:'l'未定义no-undef第50行:'l'未定义no-undef

搜索关键字以了解有关每个错误的更多信息.

我使用下面的代码尝试了与JSFiddle相同的迭代.

class TodoApp extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        loc: [
        {lat: 16.16, lng: 80.80, name:'XYZ'},
      {lat: 14.14, lng: 77.77, name:'ABC'},
      {lat: 13.13, lng: 79.79, name:'CYZ'},
      {lat: 13.31, lng: 79.97, name:'EWWE'}
      ]
    }
  }

  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.loc.map(item => (
          <li key={item.lat}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} /> 
              <span className={item.lng ? "done" : ""}>{item.name}</span>
            </label>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

它工作正常.你能帮我解决一下这个错误吗？

Answer 1

你的.map()电话没有用花括号包裹.当嵌入在JSX中时,它需要是,例如

<div> {this.state.data.map(d => <span>{d}</span>)} </div>