我有多個按鈕可以呈現不同的模態。模態可能會根據狀態中提供的資料呈現不同的結果。
我有 3 個需要考慮的狀態括號
const [cartChangeStoreShow, setCartChangeStoreShow] = useState(false);
const [orderLineId, setOrderLineId] = useState('');
const [storeId, setStoreId] = useState('');
cartChangeStoreShow 用于控制模態的可見狀態
我想要做的就是我想改變OrderLineId和storeId渲染組件之前。資料將根據 orderlineId 和 storeId 發生變化。
組件是這樣的
<CartChangeStorePopUp
visibility={cartChangeStoreShow}
setCartChangeStoreShow={setCartChangeStoreShow}
orderLineId={orderLineId}
storeId={storeId}
/>
我CartChangeStorePopUp根據道具資料在組件內部呼叫api 。
所以我像這樣將用戶按鈕交給用戶。
<TouchableOpacity
onPress={() => renderCartChangeStore(cartItem)}>
<Text>
Change Store
</Text>
</TouchableOpacity>
const renderCartChangeStore = async cartItem => {
try {
await setOrderLineId(cartItem.orderLineId);
await setStoreId(cartItem.storeId);
} catch (err) {
console.log(err);
} finally {
setCartChangeStoreShow(true);
}
};
該代碼現在正在運行，但根據我之前閱讀的內容
Async Await不能正常使用setState，所以我想知道這里撰寫的代碼是否存在潛在錯誤
uj5u.com熱心網友回復：
對我來說，async/await存在和try/catch/finally.
Async/await當您正在呼叫的函式處理諸如 I/O 之類的耗時的事情時，它很有用，在這種情況下，除了“等待”完成之外您什么也做不了。由于在 UI 背景關系中“等待”可能是不可取的，因此該async/await模式可以幫助您跟蹤“慢功能”，但甚至可以讓 CPU 空閑來處理其他有用的任務。
話雖如此，“setXXX”函式React.useState并不耗時：不涉及 I/O 或類似任務。因此，async/await不適用。
更進一步，“setXXX”函式React.useState在設定時不會出錯。它們很像設定一個變數，如下所示：
var storeId = "";
function setStoreId(value) {
storeId = value;
}
也就是說，try/catch/finally是非常無用的。
如果需要，您可以通過將三個變數分組為單個不可變物件來優化代碼。但是，這取決于您的真實代碼。
const [storeState, setStoreState] = useState({
cartChangeStoreShow: false,
storeId: "",
orderLineId: ""
});
const renderCartChangeStore = cartItem => {
setStoreState({
cartChangeStoreShow: true,
storeId: cartItem.storeId,
orderLineId: cartItem.orderLineId,
});
};
這是實作相同行為的更緊湊的方法：
const renderCartChangeStore = cartItem => {
setStoreState({
cartChangeStoreShow: true,
...cartItem,
});
};
請記住，將 storeState 視為不可變的非常重要。也就是說，永遠不要更改物件的欄位，而是使用新的欄位值創建一個全新的物件。
在這一點上，組件應該像這樣被呼叫：
const handleCartChangeStoreShow = value => {
setStoreState({
...storeState,
cartChangeStoreShow: value,
});
}
<CartChangeStorePopUp
visibility={storeState.cartChangeStoreShow}
setCartChangeStoreShow={handleCartChangeStoreShow}
orderLineId={storeState.orderLineId}
storeId={storeState.storeId}
/>
注意處理程式以正確更改storeState物件。值得一提的是如何設定新值。首先，所有當前storeState被復制到一個新的新物件，然后新的顯示值也被復制到同一個物件上。但是，由于發生這種情況之后，它將具有覆寫效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392994.html