如何解决有没有办法知道承诺是否没有得到解决?
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。