React-如何为不同的.map数据数组设置状态？

Question

我正在构建我的应用程序。但是我有一个问题，使用Axios无法将setState用于多个API调用。

我有2个不同的URL，一个是“香水”，另一个是“化妆品”。

第一个用于当我在芳香数组上加载setState时工作。

当我尝试对化妆品使用另一个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;