javascript - 使用 React 查询小型天气应用程序的字符串

Question

我希望能够使用像 ?latt_long=34.052235,-118.243683&&woeid=2442047 这样的查询字符串为我的天气应用程序设置城市。这是它的链接https://github.com/rushingMarina/weather-react-app 。现在我的项目中有一个 city.json 文件，App.js 从那里获取有关城市的数据。我似乎无法弄清楚如何使用查询字符串。上 https://www.npmjs.com/package/query-string它告诉我使用 const queryString = require('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;

我的城市.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 = require('查询字符串');但 react 在“queryString”处显示意外的 token

请引用我的github链接，在那里你会找到App.js和city.json文件

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

这是我收到的错误:

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'); 行从类声明中移出并将其放在顶部即可。就在导入语句的正下方，一切都应该正常工作。 React 不喜欢类声明中的 require 语句