axios在返回数据之前返回空数组

Posted 2023-02-22

【中文标题】axios在返回数据之前返回空数组

【英文标题】：Axios returning empty array before returning the data

【发布时间】：2019-12-16 17:46:48

【问题描述】：

我有一个简单的反应应用程序，它从 API 中提取数据并将其打印到控制台。 我正在使用 Axios 从 API 获取值。 这是 API：https://mobile-tha-server-8ba57.firebaseapp.com/walmartproducts/1/20

import React,  Component  from 'react';
import axios from 'axios';

class Products extends Component 
    state = 
        MetaProducts: []
    
    async componentDidMount()
        const res = await axios.get('https://mobile-tha-server-8ba57.firebaseapp.com/walmartproducts/1/20')
        this.setState( MetaProducts: res.data.products);
    

    render() 
        console.log(this.state.MetaProducts);
        return(
            <div>
                Products
            </div>

        )
    



export default Products;

但是axios，先返回一个空数组，然后返回带有数据的数组。

控制台： Products.js:14 [] Products.js:14 (20) […, …, …, …, …, …, …, …, …, …, …、…、…、…、…、…、…、…、…、…]

【参考方案1】：

这是因为反应生命周期的异步行为。您的渲染在您的 axios 请求完成之前被调用，并且 this.state.Metaproducts 从未在渲染内部更新，因为它已经在您的请求之前渲染。 您可以等待来自axios的回调，然后再更新状态，并确保在ajax完成后渲染产品。

我又添加了一个状态变量init，并在得到服务器响应后将其设置为true。默认情况下init 将为 false，然后您可以显示“加载消息”。

希望对你有帮助

import React,  Component  from 'react';
import axios from 'axios';

class Products extends Component 
  state = 
    MetaProducts: [],
    init:0,
  

  async componentDidMount() 
   await axios.get('https://mobile-tha-server-8ba57.firebaseapp.com/walmartproducts/1/20').then(res => 
      this.setState( MetaProducts: res.data.products, init:1 );
    );
  

  renderProduct() 
    return <ul>
    this.state.MetaProducts.map(p =>
      <li>
        p.productName
      </li>
    );
    </ul>;
  

  render() 
    return this.state.init ? <div>this.renderProduct()</div> : <div>loading...</div>;
   




export default Products;

【讨论】：

这真的很有帮助，谢谢。我还试图弄清楚如何绘制对象。顺便说一句，你还没有声明“res”

【参考方案2】：

您的意思是控制台上的空数组吗？当然。它将打印空数组。你必须看看反应生命周期。 Render 将首先运行，然后是 componentDidMount。因为您将MetaProducts 初始化为一个空数组，所以它会首先打印并清空数组。

【参考方案3】：

这是因为在 React 中 componentDidMount 是在 render 方法之后调用的。

在此处查看 React 生命周期方法 https://reactjs.org/docs/react-component.html#mounting。

它首先记录空数组，这是默认状态，然后是 axios api 调用返回的任何内容。