Query Strings с React для небольшого погодного приложения - PullRequest
Новая
       18

Query Strings с React для небольшого погодного приложения

0 голосов
/ 17 мая 2019

Я хочу установить город для своего погодного приложения, используя строки запроса, такие как? Latt_long = 34.052235, -118.243683 && woeid = 2442047. Вот ссылка на него https://github.com/rushingMarina/weather-react-app. Прямо сейчас у меня есть файл towns.json в моем проекте, и App.js извлекает данные о городах оттуда. Я не могу понять, как использовать строки запроса. На https://www.npmjs.com/package/query-string он говорит мне использовать const queryString = require ('query-string'); для того, чтобы использовать строки запроса, но я не могу объявить const в моем App.js.

My 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 ('query-string'); но реагировать показывает неожиданный токен в "queryString"

Пожалуйста, обратитесь к моей ссылке на github, там вы найдете файлы App.js и towns.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]};

1 Ответ

1 голос
/ 20 мая 2019

Просто удалите строку const queryString = require('query-string'); из объявления класса и поместите ее сверху. Прямо под оператором импорта и все должно работать нормально. React не любит операторы require внутри объявления класса

...