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

Question

我正在构建我的应用程序。但是我有一个问题，不可能使用 setState 来使用 Axios 进行多个 API 调用。

我有 2 个不同的 URL，一个用于香水，一个用于化妆品。

当我加载到香水数组时，第一个曾经工作过。

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

标签： reactjsaxios