React-Table点击行内删除按钮时如何获取当前行数据以实现精准删除

Hey there! I see exactly what's going wrong here—your delete function is hardcoding the first row's data instead of grabbing the row that's actually clicked. Let's get this sorted step by step.

The Problem #

Right now, when you pass this.deleteRow(this) to the button's onClick, you're sending the entire component instance to the function, and then you're always pulling tabledata[0] from the state. That's why every click deletes the first row, no matter which button you press.

The Solution #

We need to pass the current row's data directly to the delete function instead of the component instance. Here's how to adjust your code:

1. Update the Column's Cell Component

In your columns definition, the Cell prop has access to the row object which contains the data for the row the button is in. We'll use that to pass the correct data to deleteRow:

{
  Header: 'Optionen',
  accessor: 'platzhalter',
  Cell: ({ row }) => (
    <button onClick={() => this.deleteRow(row.data)}>
      Löschen
    </button>
  )
}

Instead of passing this, we're using row.data to get the exact data for the row that the button belongs to.

2. Rewrite the deleteRow Function

Now, the function can directly use the row data we passed in, no more hardcoding index 0:

deleteRow(rowData) {
  // Send the correct row data to your API
  api.post('/delete', {
    baumart: rowData.baumart,
    größe: rowData.größe
  })
  .then(() => {
    // Update the local state to remove the deleted row (so the UI refreshes)
    this.setState(prevState => ({
      tabledata: prevState.tabledata.filter(item => 
        // Make sure we're filtering out the exact row we deleted
        item.baumart !== rowData.baumart || item.größe !== rowData.größe
      )
    }))
  })
  .catch(error => {
    // Don't forget to handle errors!
    console.error('Fehler beim Löschen der Zeile:', error);
  });
}

• We're using rowData directly to get the baumart and größe for the delete request.
• After the API call succeeds, we update the component's state by filtering out the deleted row—this will make React re-render the table with the correct data.

Why This Works #

By passing row.data to deleteRow, we're ensuring that every button click carries the exact data for its own row. No more guessing which row to delete—it's all tied directly to the button's context.

Full Updated Columns Code #

Just to make it clear, here's the complete columns array with the fix:

const columns = [{
  Header: 'Baumart',
  accessor: 'baumart'
},{
  Header: 'Größe',
  accessor: 'größe'
},{
  Header: 'Anzahl',
  accessor: 'anzahl'
},{
  Header: 'Preis pro Baum',
  accessor: 'preis'
},{
  Header: 'Optionen',
  accessor: 'platzhalter',
  Cell: ({ row }) => (
    <button onClick={() => this.deleteRow(row.data)}>
      Löschen
    </button>
  )
}]

That should do it! Now when you click any "Löschen" button, it will delete the correct row both in your API and in the UI.

内容的提问来源于stack exchange，提问作者Ruffyg