我编写了一个Rails API后端。我可以通过在终端中观察我的服务器来看到端点受到攻击。我也可以看到邮递员的回归。但是,我无法在我的React前端返回有效负载。这是我在React中的fetch调用(我在那里有调试器,但它们没有被命中):
handleSearch(video) {
fetch(`http://localhost:3000/api/v1/search?q=${video}`)
.then((response) => {
debugger
return response.json()
})
.then((data) => {
debugger
})
}
这是我的api控制器:
def index
videos = VideoService.search_content(params['q'])
render json: videos
end
这是我在终端服务器中的输出:
Started GET "/api/v1/search?q=Firefly" for 127.0.0.1 at 2017-12-28 11:40:38 -0700
Processing by Api::V1::SearchController#index as */*
Parameters: {"q"=>"Firefly"}
Completed 200 OK in 426ms (Views: 7.5ms | ActiveRecord: 0.0ms)
我不确定问题是什么。在提出api请求之前我从未遇到过任何问题。就像我说的那样。我可以看到服务器正在与之交互,并且可以在Postman中看到有效负载返回。谢谢你的帮助!
编辑:这是我在下来的路上调用handleSearch的方式:
<SideBar
info={this.state.info}
logout={this.handleLogout.bind(this)}
search={this.handleSearch.bind(this)}
/>
在这里它被称为SideBar
组件:
searchHandler(video) {
this.props.search(video)
}
<SearchBox search={this.searchHandler.bind(this)}/>
最后输入实际进入的地方:
handleSearch(e){
let video = e.target.previousSibling.value
this.props.search(video)
}
render() {
return(
<form className="search-box" >
<input type="text" placeholder="Search.." name="search"/>
<button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}>
</button>
</form>
)
}
缺少e.preventDefault()
我是React的新手,并认为它是由React在幕后处理的。