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) 
    })
  }
}

在addSearch()中用SearchBar调用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中间件模块）。

来自Express

2 个答案: