时间戳

首页 > 解决方案 > 错误：“视口”已在上层范围内声明

reactjs - 错误：“视口”已在上层范围内声明

问题描述

我正在研究 React-Map-GL，我对它非常陌生。我已将此代码添加到我的 react-app 中，但出现如下错误：

第 28 行：'viewport' 已在上层范围内声明

它使用：“eslint-config-airbnb”

先感谢您

import React from 'react'
import ReactMapGL from 'react-map-gl'



const REACT_APP_MAPBOX_TOKEN =
  'XXXMAPBOXAPIXXX'

class Map extends React.Component {
  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8,
    },
  }

  render() {
    const { viewport } = this.state
    return (
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={REACT_APP_MAPBOX_TOKEN}
        onViewportChange={viewport => this.setState({ viewport })}
      />
    )
  }
}
export default Map

标签： reactjs

解决方案

在您的render方法中，您viewport从解构this.state，然后调用onViewportChange同名的内部变量。您不能对 2 个变量使用相同的名称，这就是您收到错误的原因。

写这个的正确方法是 -

render() {
  const { viewport } = this.state
   return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={REACT_APP_MAPBOX_TOKEN}
      onViewportChange={newViewport => this.setState({ viewport: newViewport })}
    />
  )
}

推荐阅读