Реагируйте - Как установитьState для различных массивов данных .map?

Question

Я создаю свое приложение.Но у меня есть одна проблема: невозможно использовать setState для нескольких вызовов API с помощью Axios.

У меня есть 2 разных URL-адреса: один для Fragrances и один для Cosmetics.

Первый используется для работы, когда я устанавливаюState при загрузке в массив fragrances.

Когда я пытаюсьиспользуйте еще один API-вызов для косметики, который сейчас говорит, что Fragrances не является массивом.

Как я могу просмотреть несколько различных API-категорий и как я могу установить состояние для каждого из этих массивов (данных)?Что я здесь не так делаю?

За этим следует мой код.

// Core React
import React, { Component } from 'react';

// Axios
import axios from 'axios';

// Constants
import { FRAGRANCES_URL, COSMETICS_URL } from 'constants/import';

// Components
import Fragrances from 'components/Fragrances/Fragrances';
import Cosmetics from 'components/Cosmetics/Cosmetics';

class App extends Component {

  state = {
    fragrances: [],
    cosmetics: []
  }

  getCoffee() {
    return new Promise(resolve => {
      setTimeout(() => resolve('☕'), 1000); // it takes 1 seconds to make coffee
    });
  }

  async showData() {
    try {
    const coffee = await this.getCoffee();
    const fragranceData = axios(FRAGRANCES_URL);
    const cosmeticsData = axios(COSMETICS_URL);

    console.log(coffee); // ☕

    await Promise.all([fragranceData, cosmeticsData]).then((data) => {
      this.setState({
        fragrances: data[0],
        cosmetics: data[1]
      })
    })
    } catch (e) {
     console.error(e); // ?
    }
  }

  componentDidMount() {
    this.showData();
  }

  render() {
    return (
      <React.Fragment>
        <Fragrances FragranceArray={this.state.fragrances} AppURL={FRAGRANCES_URL} />
        <Cosmetics CosmeticsArray={this.state.cosmetics} AppURL={COSMETICS_URL} />
      </React.Fragment>
    )
  }
}
export default App;