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

Posted

技术标签:

【中文标题】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 调用返回的任何内容。

【讨论】:

以上是关于axios在返回数据之前返回空数组的主要内容,如果未能解决你的问题,请参考以下文章

axios http 总是返回空数据

GraphQL从axios返回空数据[重复]

axios返回空数据和null状态

当 API 返回空数据时显示警告(Vue.js / Axios)

axios 请求数据,返回数据 data为空怎么办

axios 请求数据,返回数据 data为空怎么办