Question

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

我的SearchScreen.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;

useResults.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];
};

我能够返回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

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

1 个答案: