如何在反应中使用带有 async/await 语法的 Axios？

Question

我想使用 axios 从我的数据库中检索一个数组并将其显示在反应组件中。我使用了带有 async/await 语法的 componentDidMount() 生命周期方法，如下所示：

state = {
      products: []
}

async componentDidMount() {
     const res=  await axios.get(http://santacruz.clickysoft.net/api/public/home-product)
     .then(res => this.setState({products: res.data.products})
     .catch(err => console.log(err));
}

类组件的return语句如下：

 return (
  <div className="wwd animated" data-animation="bounceInLeft">
    <div className="wwd-slider">
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12 nlrp">
            <div className="owl-carousel owl-theme">
              {
                this.state.product.map( product => 
                  <div className="item">
                  <img src="images/p-01.png" className="img-fluid" />
                  <div className="wwd-over">
                    <a href="#">{product.product_name}</a>
                      <p>{product.info}</p>
                  </div>
                </div>
                )}
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

当我运行它时，它工作正常，状态已更新，我可以看到其中的所有产品，但似乎因为每次状态更新时，组件都会重新呈现自己，并且我在网页上的元素对齐完全不安。

我希望请求等到从 db 中获取所有元素，然后仅将其映射到状态一次。有人可以告诉我如何实现这一目标吗？

当我在 state 中对数组的所有 14 项进行硬编码时，我可以得到所需的对齐轮播视图，如下所示：

但是当我在同一个 map 函数中使用 axios 从后端获取数据时，一切都会受到干扰。

谁能告诉我为什么会这样？

Answer 1

你可以调用componentDidMount中的函数来为你调用api

componentDidMount() { 
  this.callAxiosApi(); 
}

So, in this function call the api through axios using async/await 
if you get response then set the state, if not console the error simple is that
callAxiosApi = async () => {
 try{
    const res = await axios.get("http://santacruz.clickysoft.net/entercode hereapi/public/home-product");
    if(res) this.setState({products: res.data.products})
    }catch(err){
       err => console.log(err)
    }
}

Answer 2

因此，对于您给出的示例，如果您仍在使用 .then 和 .catch，则无需等待（以及对 res 的分配）。如果你想使用 await，更惯用的方式是这样的：

async componentDidMount() {
     try {
         const res = await axios.get(http://santacruz.clickysoft.net/api/public/home-product)

         this.setState({products: res.data.products})
     } catch(err) {
         console.log(err)
     }
}

至于为什么它会导致渲染问题，那是因为 owl carousel 不兼容 react without some work。当您初始化 owl carousel 时，它会根据需要更改 DOM，这意味着它会获取您的 html 并对其进行相当多的修改 - 来自以下内容：

<div className="owl-carousel owl-theme">
   <div className="item">
                  …
   </div>
</div>

类似于：

<div class="owl-carousel owl-theme owl-loaded owl-drag">
    <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1176px, 0px, 0px); transition: 0s; width: 4704px;">
             <div class="owl-item cloned" style="width: 186px; margin-right: 10px;"><div class="item">
              …
            </div></div>
            <div class="owl-item active" style="width: 186px; margin-right: 10px;"><div class="item">
              …
            </div></div>
            <div class="owl-item cloned" style="width: 186px; margin-right: 10px;"><div class="item">
              …
            </div></div>
        </div></div>
     <div class="owl-nav">…</div>
</div>

但随后 react 运行更新，查看 DOM，并说“这不对，让我修复它”，然后将其设置回原来的状态，这消除了 owl carousel 所做的所有工作。因此，您所有的 div 将只是堆叠在一起的普通 div，而不是在轮播中。因此，要解决此问题，我建议使用专为 react 设计的轮播或 react owl carousel package。

Answer 3

你应该使用

axios.get(...).then(...).catch(...)

或

const result = await axios.get(...)
this.setState({products: result.data.product})

当您使用await关键字时，您应该将其视为同步操作，因此您不需要回调。

统一更新： 看来你有错字，你应该这样分配它

this.setState({products: result.data.product})

this.state.products.map

中也有错别字