У меня есть таблица, в которой отображается tableData
. tableData
выбирается и обрабатывается из URL-адреса и может время от времени изменяться (могут изменяться данные, а не URL-адрес) . Я хочу опросить этот URL-адрес, посмотреть, изменились ли данные, и если да, обновите tableData
, используя setTableData(<fetched and processed data>)
.
Это мой вариант:
const [tableData, setTableData] = useState([]);
// Fetch data / headers from express server
useEffect(() => {
const fetchData = async () => {
const resp = await fetch('http://localhost:4000/todos/');
const respData = await resp.json();
setTableData(respData);
console.log('debug');
};
fetchData()
}, [tableData]);
Часть function App return
:
<MUIDataTable
title = { "Bla Bla" }
data = { tableData }
columns = { tableColumns }
options = { tableOptions }
/>
Этот useEffect
вызывается постоянно. Насколько я понимаю, это работает следующим образом:
- Один раз вызов на монтировке
- Вызов каждого обновления -> обновить
tableData
с помощью setTableData(respData);
- Указанные данные отображаются внутри
return
Если я закомментирую set functions
, useEffect
вызывается один раз.
Если я использую пустой Arrays
в return
, useEffect
вызывается все время (Не понимаю ... Я думал, что, поскольку я использую пустые массивы, а не данные, которые установлены в useEffect
, render
будет вызываться только один раз, и это остановит useEffect
циклы)
Я хочу просто запустить setTableData
IFF полученные данные отличаются от полученных старых данных , но все, что я пробовал, не помогает.