有没有办法知道承诺是否没有得到解决？

问题描述

我有这个代码：

let [totalPromos,setTotalPromos] = useState(0);

for (let item of cart.items){
    let response = await api.get('/products/' + item.id);
    let price = response.data.price;
    let promotion = response.data.promotions[0];
    setTotalPromos(totalPromos + 1);
}

我的购物车中有 2 件商品，我使用 axios 调用 api 以进行促销。我无法总结我产品的促销总数。该值仅获取此代码中的最终值，即 1。我做错了什么？

解决方法

我认为你应该像这样使用这个代码。

let [totalPromos,setTotalPromos] = useState(0);

for (let item of cart.items){
    api.get('/products/' + item.id)
    .then((response) => {
      if (response) {
        let price = response.data.price;
        let promotion = response.data.promotions[0];
        setTotalPromos(totalPromos + 1);
        return;
      }
      console.log("Not a valid response");
    })
    .catch((error) => {  // Failed to resolve then go to chach block
      console.log(error);
    }
}

或者你可以使用

async function getProductById() {
  try {
    var response = await api.get('/products/' + item.id);
     if (response) {
        let price = response.data.price;
        let promotion = response.data.promotions[0];
        setTotalPromos(totalPromos + 1);
        return;
      }
      console.log("Not a valid response");
  } catch (error) {
    console.error(error);
  }
}

你可以使用你想要的，但我个人更喜欢第一个。

,

将异步调用移至 useEffect()。使用 Functional updates 选项设置状态，因此 useEffect() 不会依赖于 totalPromos，因为它会在每次渲染时重新启动（渲染是由设置状态引起的）。

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/@babel/standalone@7.12.12/babel.min.js"></script>


<div id="root"></div>

<script type="text/jsx">

  const { useState,useEffect } = React;

  const Demo = ({ items }) => {
    const [totalPromos,setTotalPromos] = useState(0);

    useEffect(async() => {
      for (const item of items){
        const price = await get(item);
        setTotalPromos(totalPromos => totalPromos + price);
      }
    },[items]);

    return (
      <div>
        {totalPromos}
      </div>
    );
  }

  const items = [1,2,3,4];

  ReactDOM.render(
    <Demo items={items} />,root
  );

  // mock async get
  function get(item) {
    return new Promise(resolve => setTimeout(() => resolve(item),100));
  }

</script>