javascript - 在 React Native 中使用 flatlist 从 API 获取数据

Question

我正在尝试显示特定 ID 的数据。因为我的数据是一个数组。我使用 flatlist 来显示它。它显示数据，但显示所有 ID。我该如何解决这个问题。任何人都可以帮助解决这个问题吗？

 <View style={[components.container]} >
                <View style={[components.logTopPanel, { backgroundColor: '#48bbae' }]} >
                    <View style={components.back_container}>
                    </View>
                    <View style={[components.logTitleContainer]} >
                        <TouchableOpacity style={components.icon_container} onPress={() => this.props.navigation.navigate('LeaveIndexScreen')}>
                            <View style={[components.back_button, components.justifyCenter, components.alignCenter, { marginHorizontal: 15 }]} >
                                <MaterialIcon name="arrow-back" size={28} color="white" />
                            </View>
                        </TouchableOpacity>
                        <View style={components.title_container}>
                            <Text style={[components.headerTextTitle, { textAlign: 'center' }]}>Leave Application</Text>
                            <Text style={[components.headerText]}> Records Details</Text>
                        </View>
                    </View>

                </View>
                <View style={[components.alignCenter, components.boxWithShadow, colours.backWhite, { borderBottomLeftRadius: 10,borderBottomRightRadius: 10,marginBottom: 5 }]}>
                    <View style={components.textFlexStart}>
                        <Text style={[components.titleTextStyle],{width:'100%', fontSize:20,textAlign:'center'}}>{staticData.get_centre_settings().centre.centre_name}</Text>
                    </View>
                </View>


                <View style={[components.logDetailPanel, components.alignCenter, { paddingHorizontal: '3%', backgroundColor: '#FBF2F0' }]} >
                    <ScrollView contentContainerStyle={[{ flexDirection: 'row', marginTop: 5 }]} >
                    {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 }) =>
                                        this.state.text == null || item.staff_name.toUpperCase()().includes(this.state.text.toUpperCase()())
                                                ? <TouchableOpacity>
                                                    <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
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.name}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.centre_name != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.centre_name}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.leave_days != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.leave_days}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.date_range != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.date_range}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.approved_by != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.approved_by}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.approved_date != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.approved_date}</Text>
                                                                                </View>
                                                                                : null

                                                                        }


                                                                        {
                                                                            item.status != null
                                                                                ? 

                                                                                <View style={{ width: '100%' }}>
                                                                                <Text style={[components.titleTextStyle]}>{item.status}</Text>
                                                                                </View>
                                                                                : null

                                                                        }

                                                            </View>

                                                                </View>

                                                            </View>

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


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


                    </ScrollView>

                    <ActionButton
                        buttonColor={Colors.blueSky}
                        offsetX={20}
                        onPress={() => navigate('LeaveEditScreen', { id: this.state.staff_id })}
                        renderIcon={() => { return (<MaterialIcon name="edit" size={20} color="white" />); }}
                    />
                </View>
            </View>
        );
    }

这是输出。

我一直在寻找这个，但找不到一个可以说明这一点的答案。

谢谢！

标签： javascriptreact-nativereact-native-flatlist