时间戳

首页 > 解决方案 > 如何在渲染之前将发送数据发送到组件？

reactjs - 如何在渲染之前将发送数据发送到组件？

问题描述

我有一个提交按钮，我想在没有反应路由器的情况下重定向到另一个页面。我的按钮向 Yelp Fusion 发出请求，但我的内容在数据发送到我的游戏组件之前被渲染。

无论如何我可以让它等到http请求完成吗？我的想法是使用 onChangeHandler 不断发出请求，这样我就可以在我们键入而不是在提交时保存数据，但这似乎有点过头了。

  // Function for accessing Yelp Fusion API
  const onSearchSubmit = async () => {
    const response = await yelp.get('/businesses/search', {
      params: {
        term: food,
        location: location
      }
    });
    // Saving our results
    setYelpResults(response.data.businesses);
  }

  return (
    <div>
      <Header />
      <Route path="/">
        <Home 
          handleFoodSearch={handleFoodSearch}
          handleLocationSearch={handleLocationSearch}
          onSearchSubmit={onSearchSubmit}
        />
      </Route>
      <Route path="/game">
        <Game yelpResults={yelpResults}/>
      </Route>      
    </div>
  )

标签： reactjs

解决方案

您可以在开始请求时设置disabled属性的属性，并在完成后将其删除吗？类似（伪代码）：


const onChangeHandler = async () => {
   myButton.disabled = true;
   await httpRequest();
   myButton.disabled = false;
}

推荐阅读