如何使用 Axios 在 React Native 中访问 Google Places API 下一页令牌?

Question

我一直在学习 react native，我正在开发一个简单的应用程序，根据使用 axios 中的 Google Places API 给出的关键字显示某个位置的一些餐馆。我能够获得next_page_token但我不知道如何使用该页面令牌再次运行我的获取。请帮忙。

我的搜索屏幕.js

import React, { useState } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';
const SearchScreen = () => {
const [term, setTerm] = useState('');
const [searchApi, results, errorMessage, pageToken] = useResults();
return (
<View>
<SearchBar
term={term}
onTermChange={setTerm}
onTermSubmit={() => searchApi(term)}
/>
{errorMessage ? <Text>{errorMessage}</Text> : null}
<Text>We have found {results.length} results</Text>
</View>
);
};
const styles=StyleSheet.create({});
export default SearchScreen;

使用结果.js

import { useEffect , useState } from 'react';
import GooglePlaces from '../api/GooglePlaces';

export default () => {
const [results, setResults] = useState([]);
const [errorMessage, setErrorMessage] = useState('');
const [pageToken, setPageToken] = useState('');
const searchApi = async (searchTerm) => {
try {
const response = await GooglePlaces.get('/json', {
params: {
location: '-33.8670522,151.1957362',
radius: 1500,
type: 'restaurant',
keyword: searchTerm,
key: 'MY_KEY_GOES_HERE',
pagetoken: pageToken
}
});
if (response.data.status == "OK") {
setResults(response.data.results);
setPageToken(response.data.next_page_token);
console.log(results);
if(pageToken!='') {
console.log("Next Page");
}
}
} catch (err) {
setErrorMessage('Something went wrong');
}
};

useEffect(() => {
console.log("Hi There");
searchApi('pasta');
}, []);
return [searchApi, results, errorMessage, pageToken];
};

我能够返回页面令牌函数。由于 Google Places API 返回 60 个结果，我需要使用该 pageToken 再运行 api 两次，以便获得最大的结果。现在，我最多只能得到 20 个结果。

Answer 1

为此，您需要将token和key作为查询字符串参数连接到基本 URL 中：

'https://maps.googleapis.com/maps/api/place/textsearch/json?pagetoken=' + token + '&key=' + key