javascript - Express 中来自 React 子组件的 POST 请求

Question

我正在为我的程序使用 MERN 堆栈(带有 React-router 和 redux)。 在我的应用程序中，我有一个 <Navbar />组件以及 <SearchBar>组件。

我使用 create-react-app 来处理 react 方面的事情，我相信你们都知道，一切最终都包含在 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) 
    })
  }
}

哪里addSearch()在 SearchBar 内调用与 onClick(this.addSearch) .

当我这样做时，POST 请求来 self 的 Navbar 下呈现的任何页面。 !

我的页面显示: Cannot POST /api/[Pagename}.js

当前在 Navbar 下呈现的任何页面带 react 开关将取代 [Pagename]

我怎样才能制作<SearchBar />在其内部创建 POST 请求？ 或者，如果不可能，我如何在 <Navbar> 中包含该发布请求？组件？

我正在考虑的事情是，它与我使用主体解析器的事实有关，并且页面的当前主体恰好是加载的任何页面。但是，我似乎在 POST 请求中定义了 body: ，所以这没有多大意义。

现在，我只是将 <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() 中。由于您仅声明 '/app/SearchPage'，因此假定它是 React 应用程序的一部分(但事实并非如此，因为它应该命中您的 API 端点)。

您应该尝试插入端点的 URL。有时，它运行在与 React 应用程序不同的端口上(取决于您的设置)。端点可能类似于 http://localhost:3050/api/SearchPage，应在 fetch() 方法的 URL 参数中设置。