Javascript React钩子上无限调用API的问题

Hy，我尝试在react hooks和materialui中创建一个带有过滤器的网格。 到目前为止，我创建了网格、过滤器选项、来自API调用和everythings的方法，但我的API是无限循环调用

这是我的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(); 
  }

我的filter方法现在不起作用，因为DOM是在无限循环上渲染的，当过滤器中给定一个值时，他无论如何都会过滤。

---

有人能帮我处理无限循环吗？

更新状态值会触发重新渲染

由于您正在执行API调用并更新状态，因此您的组件正在重新渲染，再次执行API调用并卡在这个无限循环中

解决方案： 像这样在useEffect钩子中移动API调用

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

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

}, []);

上述代码将获取所需的数据，并在安装组件时更新状态