按下按钮后在React中重新填充/刷新表格

在React中重新填充或刷新表格可以通过以下步骤实现：

创建一个React组件，用于展示表格数据。可以使用React的函数组件或类组件来实现。
在组件的状态中定义一个数据数组，用于存储表格数据。
在组件的生命周期方法（如componentDidMount）中，发送异步请求获取表格数据，并将数据更新到状态中。
在组件的渲染方法中，使用状态中的数据数组来渲染表格。
创建一个按钮元素，并为其添加一个点击事件处理函数。
在点击事件处理函数中，重新发送异步请求获取最新的表格数据，并将数据更新到状态中。
React会自动检测状态的变化，并重新渲染组件，从而实现表格的重新填充或刷新。

以下是一个示例代码：

import React, { useState, useEffect } from 'react';

const TableComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      // 发送异步请求获取表格数据
      const response = await fetch('https://api.example.com/table-data');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching table data:', error);
    }
  };

  const refreshTable = async () => {
    try {
      // 发送异步请求获取最新的表格数据
      const response = await fetch('https://api.example.com/refresh-table');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error refreshing table data:', error);
    }
  };

  return (
    <div>
      <button onClick={refreshTable}>刷新表格</button>
      <table>
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index}>
              <td>{row.column1}</td>
              <td>{row.column2}</td>
              <td>{row.column3}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TableComponent;

在上述示例中，TableComponent组件通过useState钩子来定义了一个名为data的状态变量，用于存储表格数据。在组件的useEffect钩子中，调用fetchData函数来发送异步请求获取初始的表格数据，并将数据更新到data状态中。在组件的渲染方法中，使用data状态中的数据来渲染表格。

点击按钮时，会触发refreshTable函数，该函数会发送异步请求获取最新的表格数据，并将数据更新到data状态中。React会检测到data状态的变化，并重新渲染组件，从而实现表格的重新填充或刷新。

请注意，示例中的异步请求使用了fetch函数，你可以根据实际情况选择使用其他的网络请求库。另外，示例中的URL仅作为示意，你需要根据实际情况替换为你的后端API地址。