Проблема с бесконечным вызовом API на хитов React - PullRequest
Новая
       10

Проблема с бесконечным вызовом API на хитов React

0 голосов
/ 07 марта 2020

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 выполняет рендеринг по бесконечным циклам, и когда он дает значение в фильтрах, он все равно фильтрует. enter image description here Может ли кто-нибудь помочь мне с бесконечным l oop?

1 Ответ

1 голос
/ 07 марта 2020

Обновление значения состояния вызывает повторную визуализацию.

Поскольку вы выполняете вызов API и обновляете состояние, ваш компонент выполняет повторную визуализацию, снова выполняет вызов API и застревает в этом бесконечном l oop.

Решение: переместите вызов API в хук useEffect следующим образом. 

useEffect(() => {
  HeadQuartersGet(filterOptions).then(result =>{ setData(result); });

  return () => {
  // cancel your api calls here so that there won't be any data leaks
  }

}, []);

Приведенный выше код извлечет нужные вам данные и обновит ваше состояние один раз при монтировании компонента.

...