next.js React-table不显示新数据上的数据

laawzig2 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(157)

我已经创建了一个react-table来显示通知，并且还订阅了一个事件源来获取真实的通知，但是在接收到数据之后，该表并没有刷新。
x1c 0d1x在第一个屏幕截图中，首先从数据库中检索数据以填充表。

然后在这里，在事件源发送消息之后，消息被打印到控制台，但表是空的。
下面是创建表的部分代码，特别是连接到事件源的useEffect。

const [tableData, setTableData] = useState([]);
const [tableColumns, setTableColumns] = useState<
  { Header: string; accessor: never }[]
>(new Array<{ Header: string; accessor: never }>());

// connect to event source to get real time data from msg broker
useEffect(() => {
  const eventSource = new EventSource(SseApiUrl);

  eventSource.onmessage = (event) => {
    const newData = JSON.parse(event.data).payload;
    console.log(newData);
    const newTableData = tableData;
    newTableData.push(newData as never);
    setTableData(newTableData);
  };

  return () => {
    eventSource.close();
  };
}, [SseApiUrl]);

const data = useMemo(() => tableData, [tableData]);
const columns = useMemo(() => tableColumns, [tableColumns]);

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

next.js

来源：https://stackoverflow.com/questions/76235757/react-table-not-displaying-the-data-on-new-data

1条答案

按热度按时间

enxuqcxy1#

事实上，在与ChatGPT交谈了一会儿后，我设法解决了我的问题。另一个用户给出的答案实际上促使我提出了正确的问题。
主要问题在于事件源的useEffect。我需要创建一个新数组，在我以前的实现中，const newTableData = TableData仍然指向内存中的TableData。
另外两个较小的问题是，第一，新数据中的列数不正确，第二，推送到表中的数据实际上是字符串而不是JSON对象。
下面是我做的编辑：

useEffect(() => {
  const eventSource = new EventSource(SseApiUrl);

  eventSource.onmessage = (event) => {
    const newData = JSON.parse(event.data).payload;
    const newTableData = [...tableData]; // create a new copy of the array
    newTableData.push(JSON.parse(newData) as never); // add the new data to the new copy
    setTableData(newTableData); // set the new copy as the state
  };

  return () => {
    eventSource.close();
  };
}, [SseApiUrl, tableData]);

赞(0）回复(0）举报 2023-05-17

我来回答

next.js React-table不显示新数据上的数据

1条答案

相关问题

热门标签

最新问答