Как вызвать Promise.all в функции обработчика в React.js

Question

У меня есть два вызова API, которые я пытаюсь сделать на основе ввода;

api.js

import axios from 'axios';

export const getWeather = input => {
};

export const getForecast = input => {
};

И в моем компоненте React:

import React, { Component } from 'react';
import WeatherDisplay from './WeatherDisplay';
import * as api from '../utils/api';
import dataTracker from '../utils/dataTracker';

import '../scss/app.scss';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      weatherFromInput: null,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    console.dir(dataTracker);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value,
    });
  }

  // prettier-ignore
  handleSubmit(event) {
    event.preventDefault();
    var promises = Promise.all(api.getWeather(this.state.input), api.getForecast(this.state.input))

    promises.then(function(input) {
      this.setState({ weatherFromInput: input[0], input: '' });
      console.log("input", input[0]);
    }.bind(this));
  }

  render() {
    return (
      <div className="container">
        <div className="container">
          <form name="weatherApp" onSubmit={this.handleSubmit}>
            <h2>Open Weather App</h2>
            <div className="row">
              <div className="one-half column">
                <label htmlFor="insertMode">Insert your location</label>
                <input
                  name="zipcode"
                  className="u-full-width"
                  placeholder="please enter city or zipcode"
                  type="text"
                  autoComplete="off"
                  value={this.state.input}
                  onChange={this.handleChange}
                />
              </div>
              <div className="one-half column">
                <label htmlFor="showMin">show minimum</label>
                <input type="checkbox" />
                <label htmlFor="showMax">show maximum</label>
                <input type="checkbox" />
                <label htmlFor="showMean">show mean</label>
                <input type="checkbox" />
              </div>
            </div>
            <div className="row">
              <div className="two-half column">
                <input type="submit" value="Submit" />
              </div>
            </div>
          </form>
        </div>

        <div className="container">
          <div className="row">
            <div className="twelve columns">
              {this.state.weatherFromInput !== null ? <WeatherDisplay weather={this.state.weatherFromInput} /> : null}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Я получаю эту ошибку:

App.js:77 Uncaught (in promise) TypeError: undefined is not a function

Любая помощь будет оценена!

Answer 1

Мне кажется, Promise.all() нужен массив, поэтому:

var promises = Promise.all(api.getWeather(this.state.input), api.getForecast(this.state.input))

должно быть

var promises = Promise.all([api.getWeather(this.state.input), api.getForecast(this.state.input)])