如何在Reactjs中通过获取映射数据的id来删除映射数据

state = {
  mappings: [
    { id: 1, name: 'Mapping 1' },
    { id: 2, name: 'Mapping 2' },
    { id: 3, name: 'Mapping 3' }
  ]
};

handleDeleteMapping = (id) => {
  const updatedMappings = this.state.mappings.filter(mapping => mapping.id !== id);
  this.setState({ mappings: updatedMappings });
};

render() {
  return (
    <div>
      {this.state.mappings.map(mapping => (
        <div key={mapping.id}>
          <span>{mapping.name}</span>
          <button onClick={() => this.handleDeleteMapping(mapping.id)}>删除</button>
        </div>
      ))}
    </div>
  );
}