Как устранить неполадки вызова API для OpenWeatherMap?

Question

Я создаю простое приложение React для получения и отображения погоды. У меня есть компонент SearchBar, который передает поисковый запрос в мой компонент Weather, который затем обрабатывает вызов OpenWeatherMap. Когда я console.log завершил поиск (см. Код ниже), а затем скопировал и вставил адрес в панель браузера, он разрешается, и я получаю хорошие данные для предполагаемого города. Однако, когда я пытаюсь сохранить результаты поиска в компоненте приложения, я получаю Promise {pending}. Любые идеи относительно того, почему это не решает?

Мое приложение. js код ниже:

import React from "react";
import "./styles.css";
import SearchBar from "./SearchBar";
import Weather from './Weather';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.search = this.search.bind(this);
  };

  search(term) {
    let data = Weather.search(term);
    console.log(data);
  }

  render() {
    return (
      <div>
        <h1>Weather</h1>
        <SearchBar search={this.search} />
      </div>
    );
  }
}

Тогда мой код компонента погоды (apiKey, очевидно, является актуальным ключом)

const apiKey = "xxxxxxxxxx";

const Weather = {
  search(term) {
    const searchTerm =`https://api.openweathermap.org/data/2.5/forecast?q=${term}&appid=${apiKey}`; 
    console.log(searchTerm);
    return fetch(searchTerm 
    ).then((response) => {
      return response.json();
    }).then(jsonResponse => {
      return jsonResponse
      });
    }
}

export default Weather;

Наконец, Компонент SearchBar

import React from "react";

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }

  handleTermChange(e) {
    this.setState({ term: e.target.value });
  }

  handleSearch(e) {
    this.props.search(this.state.term);
    e.preventDefault();
  }

  render() {
    return (
      <div className="SearchBar">
        <input onChange={this.handleTermChange} placeholder="Enter a City" />
        <button onClick={this.handleSearch} className="SearchButton">
          SEARCH
        </button>
      </div>
    );
  }
}