时间戳

首页 > 解决方案 > 如何使用 axios 使用钩子从具有不同参数的 API 中获取数据？

reactjs - 如何使用 axios 使用钩子从具有不同参数的 API 中获取数据？

问题描述

我正在尝试制作一个餐厅查找器应用程序，并且我正在使用 API https://developers.zomato.com/api/v2.1'。所以在那个 API 中，有很多方法可以获取数据，比如基于位置、商店名称等。那么我如何使用带有钩子的 Axios 来实现它并且我应该显示？或者您可以将此问题视为如何使用带有钩子的 axios 在屏幕上执行 api 请求和显示？

我在下面分享我的代码：-

import React, { useState } from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';
import SearchBar from '../components/SearchBar';
import zomato from '../api/zomato';

const SearchScreen = (props) => {

const [term, setTerm] = useState('');
const [results, setResults] = (['']);


/////// Making API request
/*
const searchAPI = async () => {
    //try{}
    const response = await zomato.get('/search');
   setResults(response.data.restaurants) ;

 };    
 */
const inputTerm = (event) => {
    setTerm(event);
};

return (

    <View>
        <SearchBar
            term={term}
            onTermChange={inputTerm} 

            onTermSubmit={searchAPI}
            />
        <Text> this is search screen</Text>
        <Text>We have found {results.length} result</Text>

    </View>

  );

};

所以下面我发布了 searchBar.js 文件

 const SearchBar = (props) => {

return (
    <View style={styles.background}>
        <Feather style={styles.iconStyle} name='search' size={30
        } />
        <TextInput

            style={styles.textStyle}
            placeholder='Search' 
            value={props.term}
            onChangeText={props.onTermChange}
            onEndEditing={props.onTermSubmit}
            />
    </View>

);

};

这是我的 zomazto.js 文件 从“axios”导入 axios；

export default axios.create ({
baseURL: 'https://developers.zomato.com/api/v2.1',

headers : {
    Authorization: 'Bearer e2ba1e85d07189511cade3ad235fd44c'
}
});

标签： reactjsreact-nativenetworkingaxiosreact-hooks

解决方案

如果我理解您的问题，您需要将查询参数传递到您的请求中，以根据您在 SearchBar 组件中输入的内容来查找餐厅。

您在这里不需要钩子，只需将参数添加到您的请求中，例如：

/////// Making API request
const searchAPI = async () => {
   const response = await zomato.get(`/search?q=${term}`);
   setResults(response.data.restaurants) ;
};

推荐阅读