Hy, я пытаюсь сделать сетку с фильтром в реагирующих крючках с использованием пользовательского интерфейса Пока я создаю сетку, опцию фильтра, метод из вызова API и все работает отлично, но мой API - это бесконечный вызов l oop.
Это мой вызов API:
const HeadQuartersGet = async (filterOptions) => {
var url = HEADQUARTERS_API_URL +"/isActiv&headQuartersName&headQuartersCode";
url = InsertParamsToURL(url, filterOptions);
var data = [];
async function fetchData()
{
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var requestOptions =
{
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
var json = await fetch(url, requestOptions)
.then(response => { return response.json(); })
.then(result => { return result; })
.catch(error => { return error; })
data = json;
}
await fetchData();
return data;
};
Чтобы взять данные и записать в сетку, я использую это:
const [data, setData] = useState({});
HeadQuartersGet(filterOptions).then(result =>{ setData(result); });
var rows = [];
for (var i = 0; i<data.length - 1; i++)
for(var j = 0; j<data[0].length; j++)
rows.push(createData(data[i][j].id, data[i][j].headQuartersName, data[i][j].headQuartersCode, data[i][j].headQuartersDescription, data[i][j].longitute, data[i][j].latitude, data[i][j].isActiv));
function createData(HeadQuartersId, HeadQuartesName, HeadQuartersCode, HeadQuartersDescription, IsActiv) {
return { HeadQuartersId, HeadQuartesName, HeadQuartersCode, HeadQuartersDescription, IsActiv };
}
И для фильтров я использую это:
const [filterOptions, setFilterOptions] = useState({isActiv: '1'});
const onChangeFilters = e => {
setFilterOptions({ ...filterOptions, [e.target.name]: e.target.value })
}
const submitFilterOptions = e =>{
e.preventDefault();
}
Мой метод фильтра не работать сейчас, потому что DOM выполняет рендеринг по бесконечным циклам, и когда он дает значение в фильтрах, он все равно фильтрует.
Может ли кто-нибудь помочь мне с бесконечным l oop?