Question

我正在尝试从Zomato API（https://developers.zomato.com/documentation）检索数据，并且正在尝试从选定类别中检索餐馆。这是我第一次使用API，因此如果有人可以指导我了解我不了解的内容，或者我的代码中有错误，我将不胜感激。

这是我的相关代码：

HomeScreen.js

async componentDidMount(){
  this.setState({
    data: await apiCall('')
  })
}

render() {
  return (
    <View>
      <FlatList
        style={{ marginBottom: 80 }}
        keyExtractor={item => item.id}
        data={this.state.data}
        renderItem={({ item }) =>
          <TouchableHighlight onPress={() => this.props.navigation.navigate('CategoryScreen', { category: item.categories.id })}>//the user will tap on the category and the CategoryID will be moved to the next screen
            <Card style={styles.container}>
              <Text style={{ color: '#000', fontWeight: 'bold' }}>{item.categories.name} </Text>
            </Card>
          </TouchableHighlight>}
      />
    </View>
  );
}
}

一旦用户点击平面列表中的类别单元，项目应在下一页列出该类别中的所有餐馆

CategoryScreen.js

 async componentDidMount(){
  this.setState({
    data: await apiSearch('`{this.props.navigate.category}`')
  })
  console.log(await apiSearch)
}

render(){
  return (
    <FlatList
      style={{ marginBottom: 80 }}
      keyExtractor={item => item.id}
      data={this.state.data}
      renderItem={({ item }) =>
        <Card style={styles.container}>
          <Text style={{ color: '#000', fontWeight: 'bold' }}>{item.restaurants.name} </Text>
        </Card>}
    />
  );
}

这是我拥有所有API调用函数的文件

API.js

import axios from 'axios';

export const apiCall = async () => {
  return await axios.request({
    baseURL: "https://developers.zomato.com/api/v2.1/categories?city_id=New%20Jersey%20",
    headers: {
      'user-key': "a31bd76da32396a27b6906bf0ca707a2",
    },
    method: 'get'
  }).then(async (response) => {
    return response.data.categories
  }).catch(err => console.log(err))
}

export const apiSearch = async (id) => {
  return await axios.request({
    baseURL: `https://developers.zomato.com/api/v2.1/search?category=${id}`,
    headers: {
      'user-key': "a31bd76da32396a27b6906bf0ca707a2",
    },
    method: 'get'
  }).then(async (response) => {
    return response.data.restaurants
  }).catch(err => console.log(err))
}

根据Zomato API文档所述

可以使用/ Search API（以类别ID作为输入）获得分类为特定餐厅类型的所有餐厅的列表

每个类别ID是一个特定的数字，位于apiSearch常量中baseURL的末尾。所以我想做的是将类别ID从第一页添加到第二页URL的末尾，因为这就是我认为将显示每个类别中的餐厅的方式。但是我开始认为这并不完全正确。我真的对如何使用API感到困惑

Answer 1

由于您要在HomeScreen.js中传递选定的类别ID，因此您可以按以下方式从CategoryScreen.js访问该值，

this.props.navigation.navigation.state.params.category

现在您需要将该值作为参数传递给https://developers.zomato.com/api/v2.1/search

async componentDidMount() {
    let id = this.props.navigation.state.params.category
    let result;
    try {
      result = await axios.request({
        method: 'GET',
        url: `https://developers.zomato.com/api/v2.1/search?category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
  }

最后，您可以在CategoryScreen.js中显示该数据

render() {
    return (
      <View>
        {
          this.state.isLoading ?
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator />
            </View> :
            (
              this.state.data.length == 0 ?
                <View style={{ flex: 1, padding: 20 }}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
                </View> :
                <FlatList
                  style={{ marginBottom: 80 }}
                  keyExtractor={item => item.id}
                  data={this.state.data}
                  renderItem={({ item }) =>
                    <Text style={{ color: '#000', fontWeight: 'bold' }}>{item.restaurant.name} </Text>
                  }
                />
            )
        }
      </View>
    );
  }

Answer 2

尝试一下

 async componentDidMount(){
     let response = await apiSearch('`{this.props.navigate.category}`')
     console.log(response)
     this.setState({
       data: response
     }) 
 }

React Native如何使用API URL获取数据

2 个答案:

React Native如何使用API​​ URL获取数据

2 个答案:

React Native如何使用API URL获取数据