Reactjs 如何优化代码以停止不断发送GET请求？

我正在使用Yelp Fusion API从Yelp获取餐厅列表。然而，我总是不断地发送GET请求，我不知道发生了什么或者如何修复它。我试过React.memo和useCallback。我认为问题在于我如何打电话，而不是我的组件重新招标

这里是我发送GET请求的地方

  // Function for accessing Yelp Fusion API
  const yelpFusionSearch = async () => {
    try {
      const response = await yelp.get('/businesses/search', {
        params: {
          term: food,
          location: location
        }
      })
      // Saving our results, getting first 5 restaurants,
      // and turning off our loading screen
      setYelpResults({businesses: response.data.businesses.splice(0, 5)});
      setEnableLoading(1);
    }
    catch (error) {
      setEnableLoading(2);
    }
  };

这是我使用axios的地方。

// Our Yelp Fusion code that sends a GET request
export default axios.create({
  baseURL: `${'https://cors-anywhere.herokuapp.com/'}https://api.yelp.com/v3`,
  headers: {
    Authorization: `Bearer ${KEY}`
  },
})

---

您可能正在功能组件中调用该函数，该函数设置该组件的状态，因此它将重新呈现。然后再次执行该函数，设置状态，重新渲染等等

您需要做的是将该API调用包装到：

useEffect(() => {}, [])

---

因为你可能想叫它一次。请参见

您可以做两件事，或者使用按钮获取餐厅列表，因为您正在一次又一次地启动您的功能

const yelpFusionSearch = async () => {
    try {
      const response = await yelp.get('/businesses/search', {
        params: {
          term: food,
          location: location
        }
      })

使用一个按钮来代替，这样一旦按钮被点击，功能就会被激活

<button onClick={yelpFusionSearch} />Load More Restaurants </button>

---

谢谢工作得很有魅力。但是我收到了这样的警告：“React Hook useEffect缺少依赖项：'food'、'location'和'setYelpResults'。要么包含它们，要么删除依赖项数组。如果'setYelpResults'更改太频繁，请找到定义它的父组件，并将该定义包装在useCallback中。”。但我有点困惑，因为我只希望它在初始渲染时运行，所以为什么我需要将这些值放在其中？有两种方法可以解决这个问题，您可以在

useffect

中创建要调用的函数，或者将这些变量添加到依赖项数组中（第二个参数是

useffect

函数）。它是为了防止bug，你应该按照它说的去做。如果你想在

useffect

内外多次使用该函数，其他修复方法是使用

useCallback
useEffect(() => {
   const yelpFusionSearch = async () => {
 try {
   const response = await yelp.get('/businesses/search', {
     params: {
       term: food,
       location: location
     }
   })

}, [])