在反应使用状态中从数组中拼接一个对象

Question

我有一个包含项目列表的对象数组。这些项目是从动态表单字段更新的。下面是项目对象

{ product_id: { name: "", price: 0, hsn: "" }, quantity: 0, cgst_amount: 0, sgst_amount: 0, igst_amount: 0, total: 0 }Ï

当我想从动态表单中删除不需要的项目时，我使用 splice 方法删除给定索引中的对象。这将从数组中删除正确的对象，但在 UI 部分，它将始终删除 UI 中显示的最后一项，而不是删除数组中已删除的对象。

这是我的项目数组

const [items, setItems] = useState(quotation.items ? quotation.items : []);

这是表格

        <div className="items-container mt-2">
          {items?.map((item, index) => (<div className="items">
            <div className="item-close">
              <div className="item-close-icon" onClick={() => closeItem(index)}>
                {items.length > 1 ? <Icon as={FaTimes} color="red.500" size="1.5em" /> : ""}
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="item-name">Item</FormLabel>
                <Input placeholder="Item" defaultValue={item.product_id.name} disabled={!isEdit} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="item-quantity">Quantity</FormLabel>
                <Input placeholder="Quantity" defaultValue={item.quantity} disabled={!isEdit} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="item-rate">Price</FormLabel>
                <Input placeholder="Price" defaultValue={item.product_id.price} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="hsn">HSN</FormLabel>
                <Input placeholder="HSN" defaultValue={item.product_id.hsn} disabled={!isEdit} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="cgst">CGST</FormLabel>
                <Input placeholder="CGST" defaultValue={item.cgst_amount} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="sgst">SGST</FormLabel>
                <Input placeholder="SGST" defaultValue={item.sgst_amount} disabled={true} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="igst">IGST</FormLabel>
                <Input placeholder="IGST" defaultValue={item.igst_amount} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="total">Total</FormLabel>
                <Input placeholder="Total" defaultValue={item.total_amount} disabled={true} />
              </div>
            </div>
          </div>))}
          <button className="add-item-btn orange-btn" disabled={!isEdit} onClick={() => setItems([...items, { product_id: { name: "", price: 0, hsn: "" }, quantity: 0, cgst_amount: 0, sgst_amount: 0, igst_amount: 0, total: 0 }])}>Add Item</button>
        </div>

这里是删除项目的关闭函数

const closeItem = (index) => {
  let itemsArray = [...items];
  itemsArray.splice(index, 1);
  let newArray = [...itemsArray]
  setItems(newArray);
}

Answer 1

当您不手动为数组元素提供键时，react 默认使用索引作为键，如果数组元素可能会出现问题 reorder:

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

在反应使用状态中从数组中拼接一个对象

Splice an object from an array in react usestate

reactjs

react-hooks