javascript - react native : I getting raw data in display page

Question

我正在尝试在仪表板页面中显示 staff_name。正在显示数据，但显示的是原始数据。我可以知道如何解决吗？

API代码(获取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 结果

渲染数据

 {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}
                                />
                        }

输出为

Answer 1

您是否尝试使用 WebView 而不是类似这样的 Text:

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

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