Question

我使用提取API在屏幕上显示Flatlist数据。

这是我得到的Json数据

{
    "requestDetails": "facilityList",
    "data": [
        {
            "facilityId": 73,
            "name": "ALS-ALL SAINTS HOSPITAL-NTX",
            "facilitY_PFX": "ALS",
            "isFromAllScripts": false
        },
        {
            "facilityId": 74,
            "name": "BHVH-BAYLOR HEART AND VASCULAR HOSPITAL-NTX",
            "facilitY_PFX": "BHVH",
            "isFromAllScripts": false
        },
        {
            "facilityId": 78,
            "name": "BUMC-BAYLOR UNIVERSITY MEDICAL CENTER HOSPITAL-NTX",
            "facilitY_PFX": "BUMC",
            "isFromAllScripts": false
        },
        {
            "facilityId": 79,
            "name": "CAR-CARROLLTON HOSPITAL-NTX",
            "facilitY_PFX": "CAR",
            "isFromAllScripts": true
        },
        {
            "facilityId": 81,
            "name": "DEN-TEXAS HEART HOSPITAL BAYLOR DENTON-NTX",
            "facilitY_PFX": "DEN",
            "isFromAllScripts": true
        },
]

这是我的代码

import React from 'react';
import { ActivityIndicator, Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';

interface IState {
    isLoading: boolean;
    dataSource: any;
}
export default class FacilityList extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        };
        this.renderItem = this.renderItem.bind(this);
    }

    componentDidMount() {
        return fetch(Request_url)
            .then((response) => response.json())
            .then((responseJson) => {
                // just setState here e.g.
                this.setState({ dataSource: responseJson.data, isLoading: false });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    renderItem = ({ item }) => {
        return (
            <View >
              <Text  >{item.name}</Text>
              </View>
        );
      }
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={this.renderItem}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        alignContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
    },
    touchButton: {
        alignSelf: 'center',
        backgroundColor: '#2980b9',
        paddingVertical: 25,
        width: 295,
        margin: 15,
    },
    touchButtonText: {
        textAlign: 'center',
        color: '#ffffff',
        fontWeight: 'bold'
    },
});

但是此代码没有显示在我的屏幕上，我的屏幕空白请让我知道我的代码中是否有任何错误以及为什么没有正确显示数据的原因。

更新：

很抱歉，我必须在标头中传递一个令牌，在传递该令牌后，它可以正常工作。

Answer 1

尝试此代码段。

url

Answer 2

您是否在某处声明了Request_url？还是您直接放置了链接？

React Native Flatlist数据未显示

2 个答案: