Question

我正在使用React开发我的第一个API。在加载其当前状态并设置该阵列的状态后，我可以控制台记录当前状态。但是，运行带有prop“ FragrancesArray”的组件运行该组件，该道具在从this.state.fragrances加载数据后设置，返回的不是函数。

使用axios异步并等待。

不知道为什么？有人可以帮忙吗？

谢谢。

我的代码：

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

// Axios
import axios from 'axios';

// Constants
import { FRAGRANCES_URL, BLOGS_URL, MAKE_UP_URL } from 'constants/import';

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

class App extends Component {

  state = {
    fragrances: [],
    blogs: [],
    makeup: []
  }

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

  async showData() {
    try {
      // Coffee first
      const coffee = await this.getCoffee();
      console.log(coffee); // ☕

      // Axios API's
      const fragranceData = axios(FRAGRANCES_URL);
      const blogData = axios(BLOGS_URL);
      const makeupData = axios(MAKE_UP_URL);

      // await all three promises to come back and destructure the result into their own variables
      await Promise.all([fragranceData, blogData, makeupData])

      .then((data) => {
        this.setState({
          fragrances: data[0],
          blogs: data[1],
          makeup: data[2]
        });

        const { blogs } = this.state;
        console.log(blogs);
      })

    } catch (e) {
      console.error(e); // 
    }

  }

  componentDidMount() {
    this.showData();
  }

  render() {
    return (
      <Fragrances FragranceArray={this.state.fragrances} AppURL={FRAGRANCES_URL} />
    )
  }
}
export default App;

Answer 1

在反应中，必须先使用getInitialState()声明/设置状态，然后使用ES6类模型在构造函数中初始化状态。

class App extends Component {

  constructor(props) {
    super(props)
    //- Initialize default state values
    this.state = {
      fragrances: [],
      blogs: [],
      makeup: []
    }
  }
  
  //The rest of code stays the same.

    render() {
    return (
      <Fragrances FragranceArray={this.state.fragrances} AppURL={FRAGRANCES_URL} />
    )
  }
}

More about React state

React + Axios-地图返回不是函数吗？

1 个答案: