再次抱歉錯誤。我是 reactjs 的新手，我嘗試實作功能組件并且在將資料推送到物件內部時遇到問題。我有 2 個輸入標簽，每次我在里面填充一個值并切換到另一個顯示未定義的值。我不確定這里發生了什么。幫我解釋發生了什么以及如何解決它。請指教，非常感謝。下面我放了一張圖片和我的代碼。
我的問題
function App() {
const [heldItems, setHeldItems] = useState({
salesno: '',
plu: '',
price: '',
dateandtime: '',
});
const [edit, setEdit] = useState({});
const [salesItemsTemp, setSalesItemsTemp] = useState([]);
const handlerOnEdit = (heldItemsData) => {
console.log(heldItemsData);
setHeldItems(heldItemsData);
setEdit(heldItemsData);
};
const handlerOnChange = (e, type) => {
setHeldItems({
[type]: e.target.value,
});
};
useEffect(() => console.log(heldItems));
const handlerOnSubmit = (e) => {
e.preventDefault();
const data = {
salesno: uniqid(),
plu: heldItems.plu,
price: heldItems.price,
dateandtime: new Date().toLocaleString(),
};
console.log(data);
};
const handlerRemove = (heldItemsSalesNo) => {
let filteredSalesItemsTemp = salesItemsTemp.filter(
(item) => {
return item.salesno !== heldItemsSalesNo;
},
);
setSalesItemsTemp(filteredSalesItemsTemp);
};
return (
<>
<form onSubmit={handlerOnSubmit} autoComplete="off">
<h1>GoGreen Point Of Sales</h1>
<input
type="text"
placeholder="Input item name"
name="plu"
onChange={(e) => handlerOnChange(e, 'plu')}
value={heldItems.plu}
/>
PLU
<input
type="number"
placeholder="Input item price"
name="price"
onChange={(e) => handlerOnChange(e, 'price')}
value={heldItems.price}
/>
Price
<button type="submit">
{edit.salesno ? 'Save Edit Item' : 'Save Item'}
</button>
<div>
<table>
<caption>Sales</caption>
<thead>
<tr>
<th>SalesNo</th>
<th>PLUName</th>
<th>Price</th>
<th>Date & Time</th>
<th>Void</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
{salesItemsTemp.map((sales) => {
const { salesno, plu, price, dateandtime } =
sales;
return (
<tr key={salesno}>
<td>{salesno}</td>
<td>{plu}</td>
<td>{price}</td>
<td>{dateandtime}</td>
<td>
<button
type="button"
onClick={() =>
handlerRemove(salesno)
}>
X
</button>
</td>
<td>
<button
type="button"
onClick={() =>
handlerOnEdit(sales)
}>
Edit
</button>
</td>
</tr>
);
})}
</tbody>
<tfoot>
<tr>
<td>brought to you by ...</td>
</tr>
</tfoot>
</table>
</div>
</form>
</>
);
uj5u.com熱心網友回復：
您正在替換完整的物件。以下可能有幫助：
const handlerOnChange = (e, type) => {
setHeldItems((prevValue)=>({...prevValue,
[type]: e.target.value,
}));
};
uj5u.com熱心網友回復：
在您handlerOnChange使用只有一個屬性的新物件替換之前的狀態時，您已經丟失了之前的狀態。要修復它，請handlerOnChange像這樣使用：
const handlerOnChange = (e, type) => {
setHeldItems(prevState => ({
...prevState,
[type]: e.target.value,
}));
};
uj5u.com熱心網友回復：
問題是在您的handlerOnChnage方法中，您用新狀態替換了先前的狀態，因此先前的狀態丟失了！！是的，所有這 4 種型別都丟失了，而您只剩下一種！！
你想保留以前的狀態，確定嗎？那你也可以這樣做..
從不這樣做
您可能會找到一些解決方案，例如：const handlerOnChange = (e, type) => {
setHeldItems({
...heldItems,
[type]: e.target.value,
});
};
由于設定狀態是異步的，您不能期望狀態在setHelditems執行后立即更新。想了解更多詳情嗎？訪問
更干凈的解決方案
我們有合適的解決方案嗎？是的，這里是：使用回呼函式并使用該函式更新狀態const handlerOnChange = (e, type) => {
setHeldItems(prevSnapshot=>({...prenSnapshot,
[type]: e.target.value,
}));
};
有用的鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/376511.html
標籤：javascript 数组 反应 json 目的