要从列表中删除项并更新表，可以添加一个方法来处理项的删除，并将其作为属性传递给TableArticoli组件。当用户单击删除按钮时，可以调用此方法，它应该从列表中删除项并更新父组件的状态。
下面是一个如何实现这一点的示例：

import React, { Component } from "react";
import { fileuploadbolla } from "../../services/file";
import Table from "react-bootstrap/Table";
import { Button } from "reactstrap";

function TableArticoli(props) {
  return (
    <Table striped bordered hover editable>
      <thead>
        <tr>
          <th>N° riga</th>
          <th>Codice</th>
          <th>Descrizione</th>
          <th>Prezzo</th>
          <th>Quantita</th>
          <th>Totale</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        {props.list.map((item, i) => {
          return [
            <tr>
              <td>{i}</td>
              <td>{item.codart}</td>
              <td>{item.descrizione}</td>
              <td>{item.prezzo}</td>
              <td>{item.prezzolistino}</td>
              <td>{Number(item.prezzolistino) * Number(item.prezzo)}</td>
              <td>
                <Button size="xs" color="danger" onClick={() => props.onDelete(item.codart)}>
                  Elimina
                </Button>
              </td>
            </tr>,
          ];
        })}
      </tbody>
    </Table>
  );
}

class UploadFileBolla extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image_file: null,
      image_preview: "",
      listarticoli: [],
    };
  }

  // Method to handle the deletion of an item from the list
  handleDelete = (codart) => {
    // Find the index of the item in the list
    const index = this.state.listarticoli.findIndex((item) => item.codart === codart);

    // Create a copy of the list
    const newList = [...this.state.listarticoli];

    // Remove the item from the list
    newList.splice(index, 1);

    // Update the state with the new list
    this.setState({ listarticoli: newList });
  }

  handleImagePreview = (e) => {
    let image_as_base64 = URL.createObjectURL(e.target.files[0]);
    let image_as_files = e.target.files[0];

    this.setState({
      image_preview: image_as_base64,
      image_file: image_as_files,
    });
  };

  handleSubmitFile = async ()

若要移除清单中的值并更新数据表，您可以将事件行程常式加入至Elimina按钮，以移除清单中的项目并更新数据表。请尝试下列动作：

import React, { useState } from "react";
import { fileuploadbolla } from "../../services/file";
import Table from "react-bootstrap/Table";
import { Button } from "reactstrap";

function TableArticoli({ list, onDelete }) {
  return (
    <Table striped bordered hover editable>
      <thead>
        <tr>
          <th>N° riga</th>
          <th>Codice</th>
          <th>Descrizione</th>
          <th>Prezzo</th>
          <th>Quantita</th>
          <th>Totale</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        {list.map((item, i) => {
          return [
            <tr>
              <td>{i}</td>
              <td>{item.codart}</td>
              <td>{item.descrizione}</td>
              <td>{item.prezzo}</td>
              <td>{item.prezzolistino}</td>
              <td>{Number(item.prezzolistino) * Number(item.prezzo)}</td>
              <td>
                <Button size="xs" color="danger" onClick={() => onDelete(item)}>
                  Elimina
                </Button>
              </td>
            </tr>,
          ];
        })}
      </tbody>
    </Table>
  );
}

function UploadFileBolla() {
  const [imageFile, setImageFile] = useState(null);
  const [listarticoli, setListarticoli] = useState([]);

  const handleImagePreview = (e) => {
    let imageAsFiles = e.target.files[0];

    setImageFile(imageAsFiles);
  };

  const handleSubmitFile = async () => {
    if (imageFile !== null) {
      let formData = new FormData();
      formData.append("file", imageFile);
      var listarticoli = await fileuploadbolla(formData, "SONEPAR");
      setListarticoli(listarticoli.data);
    }
  };

  const handleDelete = (item) => {
    // create a copy of the list
    let list = [...listarticoli];

    // find the index of the item to be deleted
    let index = list.indexOf(item);

    // remove the item from the list
    list.splice(index, 1);

    // update the state with the new list
    setListarticoli(list);
  };

  return (
    <div>
      <input type="file" onChange={handleImagePreview} />
      <label>Upload file</label>
      <input type="submit" onClick={handleSubmitFile} value="Submit" />
      {listarticoli.length > 0 ? (
        <TableArticoli list={listarticoli} onDelete={handleDelete} />
      ) : (
        <></>
      )}
    </div>
  );
}

我还更新了两个使用功能组件的一致性。希望这是好的。

您可以尝试以下操作：

...
<Button size="xs" color="danger" onClick={e => this.handleDelete(index,e)}>
    Elimina
</Button>
...

在类中，您可以添加：

handleDelete = (index, e) => {
      this.setState({...,
        listarticoli: this.listarticoli.filter((v, i) => i !== index));
  });

你应该传递一个函数来操作你在HOC组件中的状态。在这个函数中，你应该接收你的状态并改变它，最后设置它的状态。