为什么我在 reactjs 中的功能组件映射一个空数组?
Why my functional component in reactjs mapping an empty array?
我很抱歉大家打扰你..我是reactjs的新手,我真的不知道为什么每次我点击我的功能组件中的“X”按钮时都会在我的地图中添加新的空行()我的期望是当我点击“ X”按钮,它只会在我的控制台中记录一些东西。这里有人可以帮助解释发生了什么以及如何解决这个问题吗?下面是我 post 我的代码。请指教,万分感谢
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>
</>
);
}
导出默认应用;
当您在此处按下 X 按钮时,您正在提交表单:
<form onSubmit={handlerOnSubmit} autoComplete="off">
这是 运行 您的 handlerOnSubmit
函数中的下一行,向您的项目添加一个空条目。
setSalesItemsTemp([...salesItemsTemp, { heldItems }]);
在您的 X 按钮上使用 type="button"
来阻止表单提交。或者,将提交处理程序移动到提交按钮上的 onClick 事件,而不是表单上。
我很抱歉大家打扰你..我是reactjs的新手,我真的不知道为什么每次我点击我的功能组件中的“X”按钮时都会在我的地图中添加新的空行()我的期望是当我点击“ X”按钮,它只会在我的控制台中记录一些东西。这里有人可以帮助解释发生了什么以及如何解决这个问题吗?下面是我 post 我的代码。请指教,万分感谢
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>
</>
);
}
导出默认应用;
当您在此处按下 X 按钮时,您正在提交表单:
<form onSubmit={handlerOnSubmit} autoComplete="off">
这是 运行 您的 handlerOnSubmit
函数中的下一行,向您的项目添加一个空条目。
setSalesItemsTemp([...salesItemsTemp, { heldItems }]);
在您的 X 按钮上使用 type="button"
来阻止表单提交。或者,将提交处理程序移动到提交按钮上的 onClick 事件,而不是表单上。