我很抱歉大家打擾你..我是reactjs的新手，我真的不知道為什么每次我在我的功能組件中點擊“X”按鈕在我的地圖（）中添加新的空行我的期望是當我點擊“X”按鈕時它唯一在我的控制臺中記錄一些東西。這里有人可以幫助解釋發生了什么以及如何解決這個問題嗎？下面我在這里發布我的代碼。請指教，非常感謝。
import './App.css';
import React, { useEffect, useState } from 'react';
import uniqid from 'uniqid';
function App() {
const [heldItems, setHeldItems] = useState({
salesno: '',
plu: '',
price: 0,
dateandtime: '',
});
const [salesItemsTemp, setSalesItemsTemp] = useState([]);
const handlerOnChange = (e) => {
let heldItemsTemp = { ...heldItems };
heldItemsTemp.salesno = uniqid();
heldItemsTemp[e.target.name] = e.target.value;
heldItemsTemp.dateandtime = new Date().toLocaleString();
console.log(heldItemsTemp);
setHeldItems(heldItemsTemp);
};
const handlerOnSubmit = (e) => {
e.preventDefault();
setSalesItemsTemp([...salesItemsTemp, { heldItems }]);
setHeldItems({
salesno: '',
plu: '',
price: 0,
dateandtime: '',
});
};
const handlerRemove = () => {
console.log('its from handlerRemove !');
};
useEffect(
() => console.log('helditems', heldItems),
[heldItems],
);
return (
<>
<form onSubmit={handlerOnSubmit} autoComplete="off">
<h1>POS</h1>
<input
type="text"
placeholder="Input item name"
name="plu"
onChange={handlerOnChange}
value={heldItems.plu}
/>
PLU
<input
type="number"
placeholder="Input item price"
name="price"
onChange={handlerOnChange}
value={heldItems.price}
/>
Price
<button type="submit">add item</button>
<div>
<ul>
{salesItemsTemp.map((sales) => {
console.log('mapping sales', sales);
const { salesno, plu, price, dateandtime } =
sales.heldItems;
return (
<li key={salesno}>
<p>salesno : {salesno}</p>
<p>plu : {plu}</p>
<p>price : {price}</p>
<p>dateandtime : {dateandtime}</p>
<button onClick={handlerRemove}>X</button>
</li>
);
})}
</ul>
</div>
</form>
</>
);
}
匯出默認應用程式；
uj5u.com熱心網友回復：
當您在此處按 X 按鈕時，您正在提交表單：
<form onSubmit={handlerOnSubmit} autoComplete="off">
它在您的handlerOnSubmit函式中運行以下行，向您的專案添加一個空條目。
setSalesItemsTemp([...salesItemsTemp, { heldItems }]);
使用type="button"你的X按鈕，防止提交表單。或者，將提交處理程式移動到提交按鈕上的 onClick 事件，而不是表單上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/376518.html
標籤：javascript 数组 反应 目的 使成为
下一篇：如何為所有物件呼叫一次函式？