FlatList仅在React Native中显示一个REST API的数据

时间:2019-08-31 02:51:19

标签: reactjs rest api react-native axios

我正在尝试使用REST API,并将数据插入FlatList。我使用示例API测试了我的代码,但现在我想使用自己的API,它不会显示任何数据。

我已经在我的应用程序的其他屏幕上测试过我的api,它可以完美运行,但是突然在FlatList中不是。

makeRemoteRequest = () => {
        const url = `https://randomuser.me/api/?&results=20`;
        this.setState({ loading: true });

        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: res.results,
                    error: res.error || null,
                    loading: false,
                });
            })
            .catch(error => {
                this.setState({ error, loading: false });
            });
    };


<View style={{ flex: 1 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <ListItem
                            title={item.name.first}
                            subtitle={item.email}
                        />
                    )}
                    keyExtractor={item => item.email}
                    ItemSeparatorComponent={this.renderSeparator}
                    ListHeaderComponent={this.renderHeader}
                />
            </View>

我用自己的网址和中的字段更改了网址,但显示为空列表。

仅当我编写自己的网址时,它才能正常工作,但不显示数据。

希望您能对我有所帮助,我认为代码中没什么不好的。

0 个答案:

没有答案