为什么 flatlist 不能映射和显示数据？

Question

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

这是我第一次使用平面列表，我无法显示此数据。

目标：使用搜索栏使用 flatlist 显示城市中的餐馆列表。

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;

也许我声明状态的方式不对，或者我在状态中存储数据的方式不对。我成功地在 console.warn 中获取了餐厅的名称。

Answer 1

尝试将 renderItem 从 FlatList 替换为

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

此外，将条件替换为使用双等号，如 name.length !== 0

Answer 2

正确检查 url link。

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

只需在网络浏览器上查看它显示的消息：未找到请求的 url

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

Answer 3

如果没有您的用户密钥，我无法确定您的 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 调用添加到我的调用中即可。它工作正常。我猜你只是在弄乱你的数据。

为什么 flatlist 不能映射和显示数据？

Why isn't flatlist not able to map through and display the data?

api

react-native

react-native-android

react-native-flatlist