所以我有一個setState名字items const [items, setItems] = React.useState([]);
我的專案陣列結構
[{
"id": "0.625240011345925",
"item_name": "Item 23",
"item_price": "23",
"item_qty": "1"
}, {
"id": "0.735657461482515",
"item_name": "Item 4",
"item_price": "30",
"item_qty": "1"
}, {
"id": "0.287635530963835",
"item_name": "Item 2",
"item_price": "56",
"item_qty": "1"
}]
主功能
const AddItemToBill = (navigation) => {
navigation.navigate('AddItemToBill', {
onReturn: (itemArray) => {
const array = itemArray;
for (let i = 0; i < array.length; i ) {
const element = array[i];
setItems([...items, element]);
console.log('Items: ' JSON.stringify(array))
}
}, navigation
})
};
在下面的 Gif 中檢查問題
uj5u.com熱心網友回復：
ReactsetState是異步的。更新狀態僅在下一個渲染周期可用。因此，在 for 回圈中添加多個專案只會導致最后一個專案被更新。
鉤子規則- 不要在回圈、條件或嵌套函式中呼叫鉤子。相反，在任何提前回傳之前，始終在 React 函式的頂層使用 Hooks。
正確的方法是建立一個新的中間陣列并更新一次狀態 -
const array = itemArray;
const newState = []; // array to hold the final state
for (let i = 0; i < array.length; i ) {
const element = array[i];
// update the array for the final state
// DO NOT UPDATE STATE HERE
newState.push(element);
console.log('Items: ' JSON.stringify(array))
}
// update state ONCE outside forloop
setItems([...items, newState]);
uj5u.com熱心網友回復：
當您回圈獲取所有元素時，您可以直接傳播itemArray
onReturn: (itemArray) => {
setItems(prev => ([...prev, ...itemArray]));
}
也使用prev但不items直接作為安全宣告，如果用戶連續進行兩次快速互動，它將始終使用陣列的最后一個值呼叫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486059.html
標籤：反应式
上一篇：如何在呼叫API時使用狀態