React Native:我在显示页面中获取原始数据 [英] React Native: I getting raw data in display page

问题描述

我正在尝试在仪表板页面中显示staff_name.数据正在显示，但正在显示原始数据.我能知道怎么解决吗.

I'm trying to display staff_name in my dashboard page. The data is displaying but it's displaying raw. Can I know how to solve it.

API代码(获取网址)

API code(fetch URL)

            method: 'GET',
            headers: {
                'Authorization': 'Bearer '+ token,

            }
        })
        .then(response => response.json())
        .then((json) => {
            //  alert(json)
            if (json.error) {
                alert(json.error);
            } else {
                this.setState({
                    staffLeave: json.data,
                    isLoading: false
                });


            }

        })
        .catch((err) => {
            console.log(err)
            alert(err)
            // alert(strings.data_fail);
        })
    this.setState({ view_access: true })


    }

我在POSTMAN中检查过的

API结果

API Result that i checked in POSTMAN

渲染数据

 {this.state.view_access == false
                            ? <NoAccessScreen></NoAccessScreen>
                            : this.state.isLoading
                                ? <View style={[components.alignCenter, components.justifyCenter, components.pad_10]} >
                                    <ActivityIndicator />
                                </View>
                                : <FlatList
                                    data={this.state.staffLeave}
                                    renderItem={({ item, index }) =>
                                        this.state.text == null || item.staff_name.toLowerCase().includes(this.state.text.toLowerCase())
                                            ? (this.state.Startdate == null || Moment(Moment(item.date_from, "YYYY-MM-DD").startOf('day')).isSameOrAfter(Moment(this.state.Startdate, "YYYY-MM-DD"), 'day')) &&
                                                (this.state.Enddate == null || Moment(Moment(item.date_to, "YYYY-MM-DD").startOf('day')).isBefore(Moment(this.state.Enddate, "YYYY-MM-DD"), 'day'))
                                                ? <TouchableOpacity style={[components.flatview, { marginTop: 5 }]} onPress={() => navigate('LeaveDetailScreen', { id: item.id })}>
                                                    <View style={[components.listContainer]}  >
                                                        <View style={components.cardContainer}>

                                                            <View style={[components.dotContainer]} >
                                                                <View style={[components.flex_row, components.justifyAlignStart, { padding: 5 }]}>
                                                                    <View style={{ width: '75%' }}>
                                                                        {
                                                                            item.staff_name != null
                                                                                ? <Text style={[components.titleTextStyle]}>{item.staff_name}</Text>
                                                                                : null
                                                                        }
                                                                    </View>
                                                                    {
                                                                        item.date_from != null
                                                                            ? <View style={{ width: '25%' }}>
                                                                                <Text style={[components.titleTextStyle, { fontSize: 13 }]}>{Moment(item.date_from).format("D MMM YYYY")}</Text>
                                                                            </View>
                                                                            : null
                                                                    }

                                                                </View>
                                                            </View>

                                                        </View>
                                                    </View>
                                                </TouchableOpacity>
                                                : null
                                            : null

                                    }
                                    keyExtractor={(item, index) => index.toString()}
                                    extraData={this.state}
                                    nestedScrollEnabled={true}
                                />
                        }

输出为

推荐答案

您尝试使用WebView代替Text这样的东西吗:

have you try to use WebView instead of Text something like this :

<WebView style={[components.titleTextStyle]} html={item.staff_name}/>

https://reactnative.dev/docs/webview.html#html

这篇关于React Native:我在显示页面中获取原始数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！