如何在使用reactjs创建表时消除行中重复数据条目

import React from 'react';

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 },
        { id: 3, name: 'John', age: 35 },
        { id: 4, name: 'Jane', age: 40 },
        { id: 5, name: 'John', age: 45 },
      ],
    };
  }

  removeDuplicates = () => {
    const uniqueData = this.state.data.reduce((acc, current) => {
      const x = acc.find(item => item.name === current.name);
      if (!x) {
        return acc.concat([current]);
      }
      return acc;
    }, []);
    this.setState({ data: uniqueData });
  };

  renderTable = () => {
    return this.state.data.map(item => (
      <tr key={item.id}>
        <td>{item.name}</td>
        <td>{item.age}</td>
      </tr>
    ));
  };

  render() {
    return (
      <div>
        <button onClick={this.removeDuplicates}>Remove Duplicates</button>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>{this.renderTable()}</tbody>
        </table>
      </div>
    );
  }
}

export default Table;