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

我正在尝试从Zomato API检索数据，并尝试从选定类别检索餐厅。这是我第一次使用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>
  );
}
}

根据Zomato API文档所述

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

每个类别ID都是一个特定的数字，位于apiSearch常量中baseURL的末尾。所以我要做的是将第一页中的分类ID添加到第二页URL的末尾，因为我认为每个分类中的餐厅都是这样显示的。然而我开始认为这并不完全正确。我真的很困惑如何使用API，试试这个

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

---

由于您正在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中显示该数据

 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>}
    />
  );
}

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>
    );
  }

---

你遇到什么问题了？哈哈，它成功了！我只是忘了导入axios，谢谢！有没有你推荐的地方是我学习如何使用axios和所有这些方法的好方法？@CoolMAn我认为最好检查一下他们的官方Github回购协议-

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>
    );
  }