为什么我在 reactjs 中的功能组件映射一个空数组？

Question

我很抱歉大家打扰你..我是 reactjs 的新手，我真的不知道为什么每次我在我的功能组件中单击“X”按钮时都会在我的 map() 中添加新的空行，我的期望是当我单击“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>
    </>
);

}

导出默认应用；

Answer 1

当您在此处按下 X 按钮时，您正在提交表单：

<form onSubmit={handlerOnSubmit} autoComplete="off">

在您的 handlerOnSubmit 函数中运行以下行，为您的项目添加一个空条目。

setSalesItemsTemp([...salesItemsTemp, { heldItems }]);

在您的 X 按钮上使用 type="button" 以防止表单提交。或者，将提交处理程序移动到提交按钮上的 onClick 事件，而不是表单上。