javascript - React - 数组迭代 : "' l' is not defined"error when an array is iterated

Question

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

我正在使用以下来源。

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”来运行我的应用程序时，出现以下错误。

Failed to compile.

./src/GMap.js Line 48: 'l' is not defined no-undef Line 49: 'l' is not defined no-undef Line 50: 'l' is not defined no-undef

Search for the keywords to learn more about each error.

我使用以下代码在 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>