快速反應子組件的POST請求

Question

我正在為程序使用MERN堆棧（帶有react-router和redux）。 在我的應用程序中，我有一個<Navbar />組件以及一個<SearchBar>組件。

我使用create-react-app處理事物的反應方面，並且我確定大家都知道，所有最終都包含在App.js中。在App.js中， Navbar像這樣在react router switch語句之外。

 <Provider store={store}>
  <Router>
    <div>
   <NavBarContainer />
   <Switch>  
      <Route exact path="/" component={Homepage} />
      <Route exact path="/ProfilePage" component={ProfilePageContainer} />   
      <Route exact path="/SearchPage" component={SearchPageContainer} />     
      <Route exact path="/LoginPage" component={LoginContainer} />
   </Switch>
 </div>
 </Router>
 </Provider>

我的問題是SearchBar像這樣是Navbar的子組件。

class Navbar extends Component {
  render(){
    return (
    ***navbar stuff
    {this.props.loggedIn && <SearchBar />} 
    ***navbar stuff
    )
  }
}

當我嘗試從<SearchBar />發出POST請求時，如下所示：

addSearch = (event) => {
  if(this.props.loggedIn){
    fetch('/api/SearchPage', {
      headers : {
        "Accept" : "application/json",
        "Content-Type" : "application/json"       
      },
      method :  'POST',
      body : JSON.stringify({
        username : this.props.username,
        search : this.search.value
      }).then(function(value){
        return value.json()})
      .then(function(data){
        console.log("SearchData", data)
      }).bind(this) 
    })
  }
}

其中，使用onClick(this.addSearch)在SearchBar調用addSearch() onClick(this.addSearch) 。

當我這樣做時，POST請求來自任何頁面下，我變得Navbar ！

我的頁面說： Cannot POST /api/[Pagename}.js

當前在Navbar下使用react開關呈現的任何頁面都將替換[Pagename]

如何使<SearchBar />在其內部創建POST請求？ 或者，如果不可能，如何在<Navbar>組件中包含該發布請求？

我正在考慮的事情與我使用主體解析器的事實有關，並且該頁面的當前主體恰好是裝入的任何頁面。 但是，我似乎定義了主體：在POST請求中，所以這沒有多大意義。

現在，我只是將<SearchBar>組件的所有代碼和邏輯放在<Navbar>和搜索頁面中，但是我懷疑還有更好的方法（而保留<SearchBar>在其自己的組件中）。 理想情況下，我只想從<SearchBar>發送POST請求。

我知道我可能在這里錯過了一些常見的東西。

這是Express文件中的端點（它僅用於測試）

```
 app.post('/api/SearchPage', function(req, res done){  
  if(err) done(err);
  done(null, res.json({"Test" : "testobj"}))
}'
```   

Answer 1

從給定的代碼來看，這似乎是fetch()中的url。 由於您僅聲明了'/app/SearchPage' ，因此假定它是React應用程序的一部分（不是，因為它應該到達您的API端點）。

您應該嘗試插入端點的URL。 Is有時運行在與React應用程序不同的端口上（取決於您的設置）。 端點可能類似於http://localhost:3050/api/SearchPage ，應在fetch()方法的URL參數中進行設置。

Answer 2

我今天休息了一下，但目前的答案似乎很明顯。 當我執行fetch（）時，所有的反應就是將URL（在本例中為/ API / Page）附加到localhost / [pageimon]因為我的所有路由都是由React路由器在客戶端處理的，所以我的URL就是我正在訪問的任何頁面上。 （我沒有對Express進行任何路由）。 由於導航欄不在所有切換的范圍之內（故意），因此其中包含的任何內容都不會發出成功的發布請求，因為所有提取調用只會讀取URL。

因此，我必須找出一種繞過此方法的方法（可能是訪存參數或React中間件模塊）。