React 挂钩上无限调用 API 的问题

Question

嗨，我尝试用材质 ui 在 React Hooks 中制作一个带有过滤器的网格。到目前为止，我创建了网格、过滤器选项、API 调用的方法，一切正常，但我的 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(); 
  }

我的过滤方法现在不起作用，因为 DOM 正在无限循环中渲染，当在过滤器中给定一个值时，他无论如何都会过滤。有人可以帮我解决无限循环吗？

Answer 1

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

由于您正在执行 API 调用并更新状态，您的组件正在重新渲染，再次执行 API 调用并陷入此无限循环。

解决方法：像这样将你的 API 调用移动到 useEffect 钩子中。

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

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

}, []);

以上代码将获取您想要的数据，并在您的组件安装后更新一次状态。

React 挂钩上无限调用 API 的问题

Problem with infinite call API on React hooks

javascript

infinite-loop

react-hooks