react-native，客户平面列表选择器，在选择时返回以前的值

Question

下面是客户选择器的代码组件

import React, { useEffect, useState } from "react";
import { connect } from 'react-redux';
import {
    TouchableOpacity,
    FlatList,
    SafeAreaView,
    StatusBar,
    StyleSheet,
    Text,
    View,
    Button,
    Alert,
} from "react-native";
import { screenHeight, screenWidth } from "../constants";

const DATA = [
    {
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        title: "Client Not Found"
    },
    {
        id: "58694a0f-3da1-471f-bd96-145571e29d72",
        title: "Client refused"
    },

];

const Item = ({ item, onPress, style }) => (
    <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
        <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
);


const StatusOptions = (props) => {

    const [selectedId, setSelectedId] = useState(null);
    const renderSeparator = () => (
        <View
            style={{
                backgroundColor: "grey",
                height: 0.8
            }}
        />
    );
    const ListHeader = () => {
        //View to set in Header
        return (
            <View style={{ height: 20 }}></View>
        );
    };

    
    const renderItem = ({ item }) => {
        const backgroundColor = item.id === selectedId ? "#6cd9ff" : "white";

        return (
            <Item
                item={item}
                onPress={() => {
                    setSelectedId(item.id);
                    console.log("SELECTED ID _ STATUSOPTIONS component : ", selectedId);

                    const val = DATA.filter(status => status.id == selectedId).map(filteredStatus => filteredStatus.title);

                    console.log("VALLLLLLLLLLLLLLLLLLLLLLLUUUUUUEEEEEEEEEEEEEEEEEEEE:::: ", val);

         props.navigation.navigate('AnotherScreen');          
                }}
                style={{ backgroundColor }}
            />
        );
    };

    return (

        <View style={{ bottom: 0, flex: 1, position: 'absolute', width: screenWidth, }}>
            <View style={styles.container}>
                <FlatList
                    data={DATA}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    extraData={selectedId}
                    ItemSeparatorComponent={renderSeparator}
                    ListHeaderComponent={ListHeader}
                    style={{
                        backgroundColor: "white",
                        width: "100%",
                        borderTopRightRadius: 20,
                        borderTopLeftRadius: 20,
                        zIndex: 1,
                    }}
                />
            </View>

            <View style={{ backgroundColor: "grey", height: 0.4 }} />

            <View style={styles.closeButtonContainer}>
                <TouchableOpacity style={styles.closeButton}
                    onPress={() => {
                        props.setStatusOptionsVisible(false)
                    }}>
                    <Text style={styles.title}>Close</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

function mapStateToProps(state) {
    return {
        StatusOptionsVisible: state.volunteerItems.statusOptionsVisible,
        currentTaskItemId: state.taskItems.taskItemId,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        setStatusOptionsVisible: (visible) => dispatch({ type: 'SET_STATUS_VISIBLE', statusVisibility: visible }),

    };
}

export default connect(mapStateToProps, mapDispatchToProps)(StatusOptions);

const styles = StyleSheet.create({
    closeButton: {
        backgroundColor: 'lightgrey',
        borderRadius: 10,
        height: 50,
        justifyContent: 'center',
        width: '90%',
    },
    closeButtonContainer: {
        alignItems: 'center',
        height: 90,
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    textStyle: {
        textAlign: "center",
    },
    container: {
        borderRadius: 30,
        flex: 4,
        width: screenWidth,
    },
    item: {
        padding: 20
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        color: "black",
        textAlign: "center"
    }
});

控制台日志：("SELECTED ID _ STATUSOPTIONS component: ", selectedId) in render Item function 返回 null 用于第一个选择器项目选择，返回前一个值用于下一个选择器项目选择，任何人都可以帮助修复它吗？

Answer 1

尝试使用这个

 useEffect(() => {
          console.log("SELECTED ID _ STATUSOPTIONS component : ", selectedId);
          if(selectedId != null) {
          const val = DATA.filter(status => status.id == selectedId).map(filteredStatus => filteredStatus.title);
   
         console.log("VALLUUEEEEEEEEEEEEEEEEEEEE:::: ", val);
}
        }, [selectedId])