React - 数组迭代：迭代数组时出现“'l'未定义”错误答案

【问题标题】：React - Array iteration: "'l' is not defined" error when an array is iteratedReact - 数组迭代：迭代数组时出现“'l'未定义”错误
【发布时间】：2018-06-19 06:44:33
【问题描述】：

我是 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' is not defined no-undef 第 50 行：'l' is not defined 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"))

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

【问题讨论】：

这是我得到的错误信息。编译失败。 ./src/GMap.js 第 48 行：'l' 未定义 no-undef 第 49 行：'l' 未定义 no-undef 第 50 行：'l' 未定义 no-undef 搜索关键字以了解更多信息关于每个错误。

标签： javascript arrays reactjs google-maps react-google-maps

【解决方案1】：

您的.map() 调用未包含在花括号中。当嵌入到 JSX 中时，它必须是，例如

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

【讨论】：

太棒了 :) 如果您的问题得到解决，请将答案标记为正确

【解决方案2】：

我使用 window.L 修复了与 MapQuest 的 API 类似的问题，因为 L 正在加载 API，所以 ESLint 说 L 没有声明。

【讨论】：