Question

我正在使用Zomato API来获取餐厅列表，数据采用数组的形式，其中包含对象餐厅，其中有不同的餐厅对象，然后是它们的名称和其他详细信息。

这是我第一次使用固定列表，但我无法显示此数据。

目标：使用搜索栏可以通过列表显示城市中的餐馆列表。

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { SearchBar } from 'react-native-elements';
import { FlatList } from 'react-native-gesture-handler';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { search: '', data: [] };
    }

    componentDidMount() {
        fetch('https://developers.zomato.com/api/v2.1/search', {
            method: 'GET',
            headers: {
                'user-key': '999999999999999999999999999'
            },
            params: JSON.stringify({
                entity_type: 'city',
                q: {this.state.search}
            }),
        }).then((response) => response.json())
            .then((responseJson) => { return this.setState({ data: responseJson.restaurants }) })
            .catch((error) => { console.warn(error) }
            );
    }

    render() {
        let data = this.state.data;
        let name = data.map(p => p.restaurant.name)
        console.warn("Check Data", name)
        return (
            <View>
                <SearchBar
                    round
                    searchIcon={{ size: 24 }}
                    placeholder='Search'
                    onChangeText={search => { this.setState({ search }) }}
                    value={this.state.search}
                />
//Using this method to display the data if any

                {name.length != 0 ?
                    <FlatList
                        data={name}
                        keyExtractor={(x, i) => x + i}
                        renderItem={({ name }) => <Text>{name}-DATA</Text>}
                    />
                    : <View style={{height:"100%", width:"100%", alignItems:"center", 
                                      justifyContent:"center"}}>
                        <Text>No data found</Text>
                    </View>
                }

            </View>
        );
    }
}

export default Main;

也许我声明状态的方式是错误的，或者我在状态中存储数据的方式是错误的。我在控制台中获得了餐厅的名称。成功警告。

Answer 1

尝试将renderItem从FlatList替换为

renderItem={({ item }) => <Text>{item}-DATA</Text>}

此外，替换条件以使用像name.length !== 0这样的double等于

Answer 2

如果没有您的用户密钥，我肯定不能理解您的api结果是什么。在这里

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { SearchBar } from 'react-native-elements';
import { FlatList } from 'react-native-gesture-handler';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { search: '', data: [] };
    }

    componentDidMount() {
        fetch('http://phplaravel-325095-1114213.cloudwaysapps.com/api/shop/shop/', {
            method: 'GET',
        }).then((response) => response.json())
            .then((responseJson) => { return this.setState({ data: responseJson }) })
            .catch((error) => { alert(error) }
            );
    }

    render() {
        let data = this.state.data;
        return (
            <View>
                <SearchBar
                    round
                    searchIcon={{ size: 24 }}
                    placeholder='Search'
                    onChangeText={search => { this.setState({ search }) }}
                    value={this.state.search}
                />

                {data.length != 0 ?
                    <FlatList
                        data={data}
                        keyExtractor={(x, i) => x + i}
                        renderItem={({ item }) => <Text>{item.name}-DATA</Text>}
                    />
                    : <View style={{height:"100%", width:"100%", alignItems:"center", 
                                      justifyContent:"center"}}>
                        <Text>No data found</Text>
                    </View>
                }

            </View>
        );
    }
}

export default Main;

这是一个具有其他api调用的工作代码，只需在我的API上添加您的api调用即可。这正常工作。我想您只是在弄乱数据。

Answer 3

正确检查网址链接。

https://developers.zomato.com/api/v2.1/search/999999999999999999999999999

只需在Web浏览器上检查它是否显示消息：找不到所请求的URL

这意味着我们没有从该URL获取任何数据。这就是为什么我们无法映射任何数据的原因。

为什么平面列表不能映射和显示数据？

3 个答案: