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

Question

我有这个代码：

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。我做错了什么？

Answer 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);
  }
}

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

Answer 2

将异步调用移至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>