如何从反应本机的zomato API在SearchBar中输入的城市文本中获取zomato城市ID

问题描述

我正在制作一个小页面，其中使用了 ZOMATO api。我想显示城市的餐厅名称，由用户输入。

下面是我的代码：

import React,{ Component } from 'react';
import { View,Text,FlatList,TouchableOpacity,ActivityIndicator } from 'react-native';
import { Card,SearchBar } from 'react-native-elements';
import axios from 'axios';
export default class CityScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],isVisible: true,city: '1',**I have to give hard coded city_id here**
            isLoading: true,search: ''
        }
    }

    async componentDidMount() {
        try {
            const result = await axios.request({
                method: 'get',url: `https://developers.zomato.com/api/v2.1/search?city_id=${this.state.city}&q${this.state.search}&category=11`,headers: {
                    'Content-Type': 'application/json','user-key': 'XXXXXXXXXXXXXXXXXXXXXX'
                }
            });
            this.setState({
                data: result.data.restaurants,isLoading: false
            });
        } catch (err) {
            this.setState({ isLoading: false });
            console.log(err);
        }
    }

    updateSearch = search => { this.setState({ search }); };
    render() {
        const { search } = this.state;
        return (
            <View>
                <SearchBar
                    placeholder="Type Here..."
                    onChangeText={this.updateSearch}
                    value={search}
                    placeholderTextColor='white'
                />
                {
                    this.state.isLoading ?
                        <View style={{ flex: 1,marginTop: 200 }}>
                            <ActivityIndicator style={{ color: 'red' }} />
                        </View> :
                        (
                            this.state.data.length == 0 ?
                                <View style={{ flex: 1,padding: 20,marginTop: 100 }}>
                                    <Text style={{ color: '#000',fontWeight: 'bold' }}>No restaurants from selected category</Text>
                                </View> :
                                <View style={{ flexDirection: 'column' }}>
                                    <FlatList
                                        keyExtractor={item => item.id}
                                        data={this.state.data}
                                        renderItem={({ item }) =>
                                            <TouchableOpacity onPress={() => console.log(item.restaurant.location.city)}>
                                                <Card style={{ width: 40 }}>
                                                    <Text style={{ color: '#000',fontWeight: 'bold' }}>{item.restaurant.name} </Text>
                                                </Card>
                                            </TouchableOpacity>
                                        }
                                    />
                                </View>
                        )
                }
            </View>
        )
    }
}

在构造函数中，您可以看到我必须提供硬编码的城市 ID，这就是我遇到麻烦的地方。我希望我的 this.state.city 在用户在 SearchBar 中输入城市名称时获取城市 ID。我尝试了很多小时，但无法解决它。请帮帮我！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）