如何使用React及React Hooks每秒向React Table新增一行展示数据

你的代码核心问题是React状态更新的浅比较规则没有被满足，导致组件不会触发重渲染：
你在更新sensors状态时，直接操作了原数组的引用：

let newData = sensors; // 直接赋值原数组引用，没有创建新数组
newData.push(API_DATA_RETURNED[index]);
setSensors(newData); // 传入的还是原数组的引用，React浅比较认为状态没有变化，不会触发重渲染

其次还有两个附带问题：

• useEffect依赖中加入了sensors，每次sensors变化都会重新创建定时器，会出现重复计时的问题
• setSensors是异步更新，你在setSensors之后立即打印sensors，拿到的还是更新前的旧值，会误导你的判断

1. 调整状态更新逻辑，每次返回新的数组引用：
   替换原loadData函数的逻辑，使用状态更新的函数式写法，不需要依赖sensors就能拿到最新值：

function loadData(index) {
  console.log("loadData called");
  setSensors(prevSensors => [...prevSensors, API_DATA_RETURNED[index]]);
  setLoading(false);
}

2. 调整useEffect的依赖项，移除sensors，避免重复创建定时器：

useEffect(() => {
  function loadData(index) {
    console.log("loadData called");
    setSensors(prevSensors => [...prevSensors, API_DATA_RETURNED[index]]);
    setLoading(false);
  }
  setLoading(true);
  // GET sensor list from API

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

  return () => window.clearInterval(timer);
}, [page]); // 只保留page作为依赖

修改完成后表格就会每秒新增一行数据，正常渲染。

内容的提问来源于stack exchange，提问作者Sudin Ranjitkar