我正在嘗試使用反應掛鉤設定訂單串列。該方法是正確的，但組件不會更新，直到我從 React 開發工具強制它。添加訂單的按鈕在一個組件中，而串列是一個不同的組件。
我嘗試設定 useEffect 但結果是一樣的。
這是狀態宣告和方法
const [orderList, setOrderList] = React.useState([]);
const addToOrderList = (order) => {
const list = orderList;
if (list)
list.push(order);
setOrderList(list);
}
這里是渲染中的組件
<div className="w-3/5">
<ItemDeliveryCard
fromMenu={true}
selectedMenu={selectedMenu}
orderList={orderList}
onClickHandler={(order) => addToOrderList(order)}
/>
</div>
<div >
<DeliveryCard orderListProp={orderList} />
</div>
按鈕在 ItemDeliveryCard
<button
onClick={() => onClickHandler(product)}
className={gradients.redGradToL " w-80 flex flex-row items-center justify-center mb-5"}
>
<p className="uppercase">select this offer</p>
</button>
我嘗試了這篇文章中的解決方案，但 useEffect 似乎不起作用
uj5u.com熱心網友回復：
您正在改變狀態，您需要將其視為不可變的，請嘗試：
const addToOrderList = (order) => {
if (orderList) {
setOrderList(prevList => [...prevList, order]);
}
}
uj5u.com熱心網友回復：
修改狀態的 React 鉤子方式：
const addToOrderList = (order) => {
setOrderList(list => (list ? list : []).concat(order));
}
一點解釋：
- 您的代碼不會觸發更新的原因是因為您設定的串列的新值與舊值
setOrderList(newValue)是相同的陣列參考，React 沒有檢測到這種變化，因此沒有更新。 - 建議您使用更新程式功能模式：
setValue(oldValue => {
/* whatever mutation logic you need */
return newValue
})
而不是將變異邏輯移到外面然后設定最終值，就像你目前所做的那樣。原因是這種模式將減輕陳舊的關閉問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338320.html
標籤：javascript 反应 反应钩子
上一篇：使用標簽索引遍歷div元素