我正在嘗試在購物車中添加商品。它有效，但是當我想計算要顯示在購物車上的商品數量時添加商品后。第二個函式 (calculate()) 不等待專案掛鉤。因此，它在添加第二個專案后顯示正確的計數。
下面的代碼是我的功能。如您所見，在第一個函式的末尾，我呼叫了 calculate() 函式以使其繼續運行。
const [testArray, setTestArray] = useState([]);
const [total, setTotal] = useState(0);
const [cartCount, setCartCount] = useState(0);
function addToTest(product, quantity = 1) {
const ProductExist = testArray.find((item) => item.id === product.id);
if (ProductExist) {
setTestArray(
testArray.map((item) => {
if (item.id === product.id) {
return { ...ProductExist, quantity: ProductExist.quantity 1 };
} else {
return item;
}
})
);
} else {
product.quantity = 1;
setTestArray([...testArray, product]);
}
calculate();
}
function calculate() {
let resultCount = 0;
testArray.map((item) => {
console.log("map func works!");
setCartCount(cartCount item.quantity);
});
}
這是我的 codeandbox 專案，為了不打擾你，我很簡單。
https://codesandbox.io/s/react-template-forked-u95qt?file=/src/App.js
由于同步功能，可能出現問題。因此，當我嘗試 async/await 時，我收到有關引數的錯誤，因為第一個函式有引數。
這是我第一次嘗試 async/await：
async function calculate(product) {
await addToTest(product);
let resultCount = 0;
testArray.map((item) => {
console.log("map func works!");
setCartCount(cartCount item.quantity);
});
}
作為其他解決方案，我嘗試通過參考 setArray 鉤子來使用 useEffect。但是，在這種情況下，計數數量呈指數增長，如 1,3,9...
useEffect(()=>{
let resultCount = 0;
testArray.map((item) => {
console.log("map func works!");
setCartCount(cartCount item.quantity);
});
},[testArray])
我想知道問題出在哪里？因為當我在 Angular/Typescript 中使用上層代碼時，它可以正常作業。我認為這是由于反應鉤子造成的，但我無法理解這個問題。
uj5u.com熱心網友回復：
每次呼叫setCartCount只會cartCount在下一次渲染時更新，因此您（實際上）只使用陣列中的最后一項呼叫它。您應該改為reduce在陣列上使用來獲取您想要的值，然后設定它。
見https://codesandbox.io/s/react-template-forked-u95qt?file=/src/App.js
uj5u.com熱心網友回復：
您使用 a 的想法useEffect是個好主意，但不是setCartCount每次迭代都呼叫，而是應該item.quantity先對所有計數求和，然后setCartCount在回圈后呼叫一次。
注意：map()如果您要忽略它回傳的陣列，請不要使用，請使用for回圈，for...of如下例所示，或者forEach()改為使用回圈。
useEffect(() => {
let resultCount = 0;
for (const item of testArray) {
resultCount = item.quantity;
}
setCartCount(resultCount);
}, [testArray]);
或 with reduce()（此處解構并重命名quantity每個傳遞的屬性item）
useEffect(() => {
const resultCount = testArray.reduce((a, { quantity: q }) => a q, 0);
setCartCount(resultCount);
}, [testArray]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370132.html
標籤：javascript 反应
上一篇：向通過API檢索的YouTube觀看次數添加小數點分隔符
下一篇：重繪后反應Redux和狀態