今天是从一个新的名为ProdutoMania的副项目开始的

该项目的主要功能是在我目前居住的地方查找我的祖国的产品。
因此,我需要一个位置选择器,并且可以使用Google Place / Maps API。

今天是从一个新的名为ProdutoMania的副项目开始的

该项目的主要功能是在我目前居住的地方查找我的祖国的产品。
因此,我需要一个位置选择器,并且可以使用Google Place / Maps API。

// Cache Middleware Config
memcached, err := memory.NewAdapter(
memory.AdapterWithAlgorithm(memory.LRU),
memory.AdapterWithCapacity(1000000),
)
if err != nil {
fmt.Println(err.Error())
os.Exit(1)
}
cacheClient, err := cache.NewClient(
cache.ClientWithAdapter(memcached),
cache.ClientWithTTL(24 * time.Hour),
cache.ClientWithRefreshKey("opn"),
)

然后,我定义处理程序并应用中间件进行路由:

// Cache Google Place API calls
hLocation := http.HandlerFunc(handler.GetLocations)

r.Route("/", func(r chi.Router) {

// location autocomplete
r.With().Get("/{term}", CacheClient.Middleware(hLocation).ServeHTTP)
})

在前端,我使用:

使用我自己的React 17 / Webpack / Boilerplate与Webpack进行反应
降档作为灵活的自动完成/下拉组件
去弹-fn程序包
对于typeahead函数,不要在Char触发的每个onChange上都不调用API,去抖动非常重要。仅向API发送一个字符也是没有意义的。

这里的useLocation Hook / Service部分代码:
export function useLocation() {
const [{ isLoading, error, data }, dispatch] = useReducer(
reducer,
initialState
)
const fetchLocationResults = debounce(
async (searchString) => {
if (searchString.length > 2) {
const locationUrl =

http://localhost:9090/${searchString}

dispatch({ type: actionTypes.FETCH_REQUEST })
try {
const response = await axios.get(locationUrl)
dispatch({
type: actionTypes.FETCH_SUCCESS,
results: response.data,
})
} catch (error) {
dispatch({ type: actionTypes.FETCH_FAILURE, error })
}
}
},
{ wait: 400 }
)
return { error, isLoading, data, fetchLocationResults }