React:如何在点击按钮后刷新表格中的数据

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [] // 存储表格数据的数组
    };
  }

  componentDidMount() {
    // 在组件挂载后获取初始数据
    this.fetchData();
  }

  fetchData() {
    // 通过网络请求获取数据，并更新状态中的数据数组
    // 示例代码中使用了fetch函数进行网络请求，你也可以使用其他方式
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

  handleClick() {
    // 在按钮点击时获取最新的数据
    this.fetchData();
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        <button onClick={() => this.handleClick()}>刷新数据</button>
        <table>
          <thead>
            <tr>
              <th>列1</th>
              <th>列2</th>
              <th>列3</th>
            </tr>
          </thead>
          <tbody>
            {data.map(item => (
              <tr key={item.id}>
                <td>{item.column1}</td>
                <td>{item.column2}</td>
                <td>{item.column3}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;