React-таблица не отображает данные о новых данных
Я создал таблицу реагирования для отображения уведомлений, а также подписался на источник событий для получения уведомлений в реальном времени, но после получения данных таблица не обновляется.
На этом первом снимке экрана данные были сначала извлечены из базы данных для заполнения таблицы.
Затем здесь, после того, как источник события отправил сообщение, сообщение выводится на консоль, но таблица пуста.
Ниже приведена часть кода для создания таблицы, в частности, 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.info(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;
Ответы 1
На самом деле, немного поговорив с
Основная проблема заключалась в использовании эффекта для источника события. Мне нужно было создать новый массив, и в моей предыдущей реализации 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]);