【发布时间】：2019-01-05 13:15:28
【问题描述】：
我正在为我的程序使用 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 下渲染的任何页面都将替换[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"}))
}'
```
【问题讨论】：
-
您没有针对 Express 端点发出 POST 请求。您正在针对 React 组件执行此操作，这是不可能的。
-
我是怎么做到的？我的 fetch 方法转到 /api/SearchPage，我的节点文件有一个 app.post('/api/SearchPage') 侦听器。我假设因为
是一个子组件，所以你说它存在于父组件的上下文中，并且永远不会被 express “看到”。但是，我已经尝试将所有逻辑从 进入一个完全不同的页面，我得到相同的结果。 -
请添加上述端点的代码，然后编辑原始帖子。
-
刚刚添加到页面中。
标签： javascript node.js reactjs express redux