在我的 Meals#index 页面上,我想显示一个地图,该地图呈现显示地图边界内的所有餐厅。(每餐都属于一家餐厅,地图实际上是与餐食列表一起显示的,就像 AirBnB 搜索页面一样,但显示的是食物而不是公寓)
当我尝试从 Rails 获取数据到 React 时,我收到以下错误:
缺少关键字:min_lat、max_lat、min_lng、max_lng
地图.js
fetchPlacesFromApi() {
this.setState({ places: [] })
fetch(`/meals?min_lng=${this.xMapBounds.min}&max_lng=${this.xMapBounds.max}&min_lat=${this.yMapBounds.min}&max_lat=${this.yMapBounds.max}`,
{ method: 'GET' })
.then((response) => response.json())
.then((response) => this.setState({ places: response }))
}
餐饮控制器.rb
class MealsController < ApplicationController
def index
@restaurants = Restaurant.where(id: @meals.pluck(:restaurant_id))
places = @restaurants.look_at(search_params.to_h.symbolize_keys)
render json: places
end
private
def search_params
params.permit(:min_lng, :max_lng, :min_lat, :max_lat)
end
end
模型/餐厅.rb
scope :by_longitude, -> (min, max) { min && max ? where('longitude >= :min AND longitude <= :max', min: min, max: max) : all }
scope :by_latitude, -> (min, max) { min && max ? where('latitude >= :min AND latitude <= :max', min: min, max: max) : all }
API_RESULTS_LIMIT = 100
def self.look_at(min_lat:, max_lat:, min_lng:, max_lng:)
by_latitude(min_lat, max_lat).
by_longitude(min_lng, max_lng).
limit(API_RESULTS_LIMIT)
end
餐食/index.html.erb
<%= react_component("App", prerender: false) %>