使用React为一个小型天气应用程序查询字符串

Question

我希望能够使用?latt_long=34.052235、-118.243683&&woeid=2442047等查询字符串为我的天气应用程序设置一个城市。这里有一个指向它的链接https://github.com/rushingMarina/weather-react-app。现在，我的项目中有一个cities.json文件，App.js从那里获取有关城市的数据。我似乎想不出如何使用查询字符串。在查询上，它告诉我使用const queryString = https://www.npmjs.com/package/query-string (‘query-string’)；来使用查询字符串，但是我不能在我的App.js中声明一个const。

我的App.js：

import React, { Component } from "react";
import FrontSide from "./FrontSide";
import BackSide from "./BackSide";
import "./panel.css";
import cities from "./cities.json"
import queryString from 'query-string';


class App extends Component {

const queryString = require('query-string'); //I get unexpected token error (11:6) on this line right before queryString
console.log(location.search);

state = {flipped: false, currentCity: cities[0]};


 onFlip =() => {
    this.setState({flipped: !this.state.flipped});
 };

 onSelectCity = (city) => {
   this.setState({currentCity: city})
 }


  render() {
    return (
        <div className={`panel ${this.state.flipped ? 'flip' : ""}`}>
            <div className="panel-front">
            <FrontSide onClick={this.onFlip} currentCity={this.state.currentCity}/>
          </div>
            <div className="panel-back">
            <BackSide
              cities={cities}
              onClick={this.onFlip}
              currentCity={this.state.currentCity}
              onSelect={this.onSelectCity}
              />
          </div>
        </div>
      );
  }
}

export default App;

我的cities.json

[
  {
    "title":"Los Angeles",
   "location_type":"City",
   "woeid":2442047,
   "latt_long":"34.052235,-118.243683"
  },
  {
  "title":"San Diego",
  "location_type":"City",
  "woeid":2487889,
  "latt_long":"32.715736,-117.161087"
  },
  {
  "title":"New York",
  "location_type":"City",
  "woeid":2459115,
  "latt_long":"40.730610,-73.935242"
  },
  {
  "title":"Chicago",
  "location_type":"City",
  "woeid":2459115,
  "latt_long":"41.881832,-87.623177"
  },

  {"title":"St Petersburg",
   "location_type":"City",
   "woeid":2123260,
   "latt_long":"59.932739,30.306721"
  }

]

我尝试声明const = queryString (‘query-string’)；但react在"queryString“处显示意外的标记。

请参考我的github链接，在那里你可以找到App.js和cities.json文件

我希望获得有关城市的信息，以显示在我的FrontSide从URL查询-字符串，如。

这是我得到的错误：

Failed to compile.

./src/App.js
Syntax error: Unexpected token (11:6)

   9 | class App extends Component {
  10 |
> 11 | const queryString = require('query-string');
     |       ^
  12 | console.log(location.search);
  13 |
  14 | state = {flipped: false, currentCity: cities[0]};

Answer 1

只需将const queryString = require('query-string');行从类声明中删除并放在顶部即可。就在import语句下面，一切都应该正常工作。React不喜欢类声明中的require语句