Почему плоский список не может отображать и отображать данные?

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;

Возможно, неправильный способ, которым я объявил состояние, или неправильный способ хранения данных в этом состоянии. Я получил названия ресторана в console.warn успешно.

Answer 1

Без вашего ключа пользователя я не могу точно понять, каковы ваши результаты 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 вместо моего .. Это работает правильно. Я полагаю, вы просто портите свои данные.

Answer 2

Попробуйте заменить renderItem с FlatList на

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

Также замените условие на использование двойных равных, таких как name.length !== 0

Answer 3

Проверьте URL-ссылку должным образом.

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

Просто проверьте его в веб-браузере, где отображается сообщение: запрошенный URL-адрес не найден

Это означает, что мы не получаем никаких данных с этого URL. Поэтому мы не можем отобразить какие-либо данные.