Const рассматривается как строка React.JS / fetch

Question

Я пытаюсь взять значения формы и передать их в вызов API, но переменная ${city} обрабатывается как строка. Я рассмотрел различные другие примеры использования переменных в вызове fetch, и это кажется правильным. Что я делаю не так?

Функция:

class App extends Component {
  getWeather = async (e) => {
    const api_key = '11deac5d16f942afda257188d880da59';
    e.preventDefault(); 
    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    const call = await fetch('http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=11deac5d16f942afda257188d880da59');
    const data = await call.json();

    console.log(data);
    }

Форма:

import React from "react";

class Form extends React.Component {
render() {
return (
    <form onSubmit={this.props.getWeather}>
        <input type="text" name="city" placeholder="City" />
        <input type="text" name="country" placeholder="Country" />
        <button>Fetch Weather</button>   </form>
);
}
};

export default Form;

Answer 1

Строковая интерполяция в ES6 должна использоваться с обратными галочками. ``.

В вашем случае измените эту строку:

const call = await fetch('http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=11deac5d16f942afda257188d880da59');

до

const call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=11deac5d16f942afda257188d880da59`);

Answer 2

Вам нужно использовать backticks

`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=11deac5d16f942afda257188d880da59`

против того, что у вас есть:

'http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=11deac5d16f942afda257188d880da59'