reactjs - 如何通过使用 react 和 react 钩子每秒添加新行来每秒在我的反应表上显示数据？

Question

我正在尝试每秒获取 json 数据以在我的反应表中添加为新行。在控制台中，似乎每秒都有数据出现，但在 UI 中没有任何数据弹出。无法弄清楚为什么没有显示任何该表行。下面的代码段在 stackoverflow 中不起作用，请使用沙箱运行代码。

import React, { useState, useEffect } from "react";
import { useTable } from "react-table";
// import "./styles.css";

const API_DATA_RETURNED = [
  {
    // I tried id: "1" as well
    id: "1",
    name: "TEMP001",
    serialNum: "Temp Sensor",
    status: "Active",
  },
  {
    id: "2",
    name: "TEMP002",
    serialNum: "Temp Sensor",
    status: "Unknown",
  },
  {
    id: "3",
    name: "HUM003",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
  {
    id: "4",
    name: "HUM004",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
  {
    id: "5",
    name: "HUM005",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
];

function SensorTable({ columns, data }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({ columns, data });

  // Render the UI for your table
  return (
    <table {...getTableProps()} style={{ border: "solid 1px blue" }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: "solid 3px red",
                  background: "aliceblue",
                  color: "black",
                  fontWeight: "bold",
                }}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      padding: "10px",
                      border: "solid 1px gray",
                      background: "papayawhip",
                    }}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function SensorContainer() {
  const [page, setPage] = useState(0);
  const [sensors, setSensors] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    function loadData(index) {
      console.log("loadData called");

      let newData = sensors;
      console.log(newData);
      newData.push(API_DATA_RETURNED[index]);
      setSensors(newData);
      console.log(sensors);

      setLoading(false);
    }
    setLoading(true);
    // GET sensor list from API

    const timer = window.setInterval(() => {
      if (page < API_DATA_RETURNED.length) {
        loadData(page);
        setPage(page + 1);
      }
    }, 1000);

    return () => window.clearInterval(timer);
  }, [page, sensors]); // This is self is componentDidMount

  const columns = React.useMemo(
    () => [
      {
        Header: "ID",
        accessor: "id", // accessor is the "key" in the data
      },
      {
        Header: "Name",
        accessor: "name",
      },
      {
        Header: "Serial Number",
        accessor: "serialNum",
      },
      {
        Header: "Status",
        accessor: "status",
      },
    ],
    []
  );

  if (sensors.length === 0 && !loading) {
    return <div>No Senors data available</div>;
  }

  return (
    <div>
      {loading && <span>Please wait we are fetching data</span>}
      <SensorTable columns={columns} data={sensors} />
    </div>
  );
}
export default function App() {
  return <SensorContainer />;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

沙盒中的相同代码