使用useEffect和setState进行状态更改后，表数据不会重新呈现

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

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

  useEffect(() => {
    // 模拟异步获取表数据
    fetchData().then((result) => {
      setData(result);
    });
  }, []); // 依赖数组为空，表示只在组件挂载时执行一次

  const fetchData = async () => {
    // 异步获取表数据的逻辑
    // 这里可以使用fetch、axios等方法发送请求获取数据
    // 返回获取到的数据
  };

  const handleStateChange = () => {
    // 使用setState更新状态
    setData([...data, newItem]);
  };

  return (
    <div>
      <button onClick={handleStateChange}>更新状态</button>
      <table>
        <thead>
          <tr>
            <th>表头1</th>
            <th>表头2</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <tr key={item.id}>
              <td>{item.field1}</td>
              <td>{item.field2}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;