我要編輯的物件以 JSON 格式進行編輯，但瀏覽器中僅顯示以前的資料。我使用這些鉤子從本地存盤中獲取產品串列
const Cart = () => {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(()=>{
setProducts(loadCart());
setLoading(false)
},[])
然后我映射所有的物件
const mapProducts = (products) => {
return (
<>
{products.map((product) => {
return (
<>
<div className="cart-detail">
<h4>{product.name} - {product.price}$
/ total: {product.price * product.amount}$</h4>
<h4>{product.amount}</h4>
<button onClick={() => incrementAmount(product)}> </button>
</div>
</>
)
})}
</>
)
}
return (
<Base title="Cart">
{loading && <h1>Loading...</h1>}
{!loading && mapProducts(products)}
</Base>
)
incrementAmount() 函式看起來像這樣：
const incrementAmount = (product) => {
let tempList = products
for (let i = 0; i < tempList.length; i ) {
if (tempList[i].id === product.id) {
tempList[i].amount ;
}
}
setProducts(tempList)
}
從我在控制臺中看到的情況來看，陣列看起來不錯，我想編輯的物件也得到了編輯。FE：我有一個物件 {name:"hoodie", amount:3} 在點擊“ ??”按鈕后它會正確更改為 {name:"hoodie", amount:4}（在products和 中tempList）但僅在控制臺中，在檔案它仍然顯示product.amount為 3，我不知道為什么
uj5u.com熱心網友回復：
setState你可以傳遞一個函式而不是傳遞一個物件，當你有一個物件進入你想要保留舊值的狀態時，你必須使用一個函式。
因為state可能會異步更新，所以您不應該依賴它們的值來計算下一個狀態。
您必須incrementAmount()像這樣更改函式：
const incrementAmount = (product) => {
setProducts(prevState => {
const newState = [...prevState];
for (let i = 0; i < newState.length; i ) {
if (newState[i].id === product.id) {
newState[i].amount ;
}
}
return newState;
});
}
uj5u.com熱心網友回復：
您必須更改以前的狀態并在setProducts函式中回傳新狀態
setProducts(prev => {
let tempList = [...prev];
for (let i = 0; i < tempList.length; i ) {
if (tempList[i].id === product.id) {
tempList[i].amount ;
}
}
return tempList
})
uj5u.com熱心網友回復：
這是因為只有當狀態改變時，react 才會觸發重新渲染。當您呼叫setProductsin 時incrementAmount，您實際上是在傳遞相同的物件（更新了一個嵌套屬性）。因此，react 不會將此注冊為狀態更改。這是由于物件和陣列在 Javascript 中的作業方式。為了讓您的代碼正常作業，請更改let tempList = products為let tempList = [...products]. 這將在記憶體中創建一個新物件并從products. 最后，當您將其傳遞給 時setProducts，將觸發重新渲染以更新您的 HTML。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/370616.html
標籤：javascript 反应 反应钩子 使用效果 使用状态