在平面列表中加载初始数据

Question

I am using React-native to create an app for a school district. On one screen I want to be able to search through the staff directory to find a staff member. I am using a Flatlist to display each staff member and a TextInput to search through the list. The issue I am having with my current code is that upon the initial screen load my Flatlist does not render any components. When I enter text into my TextInput then the flatlist renders. How can I fix this so that my data is displayed in the flatlist when initially loading.

const StaffScreen = props => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState();
    const [searchTerm, setSearchTerm] = useState('');
    const [data, setData] = useState(staff);
    const staff = useSelector(state => state.staff.staffMembers);
    const dispatch = useDispatch();

    const loadStaff = useCallback(async () => {
        setError(null);
        setIsLoading(true);
        try {
            await dispatch(staffActions.loadStaff());

        } catch (err) {
            setError(err.message)
        }
        setIsLoading(false);
    }, [dispatch, setIsLoading, setError]);

    useEffect(() => {
        const willFocusSub = props.navigation.addListener('willFocus', loadStaff);
        return () => {
            willFocusSub.remove();
        };
    }, [loadStaff]);

    useEffect(() => {
        loadStaff();
    }, [dispatch, loadStaff]);

    const textChangeHandler = event => {
        setSearchTerm(event);
    }

    useEffect(()=> {
        const searchItem = searchTerm;
        const results = staff.filter(staffMember => staffMember.firstName.includes(searchItem) 
        || staffMember.lastName.includes(searchItem) 
        || staffMember.jobTitle.includes(searchItem) );
        setData(results)
    }, [searchTerm]);


    if (error) {
        return <View style={styles.container}>
            <View style={{ alignSelf: 'flex-start' }}><RichHeader title='Staff Directory' /></View>
            <View style={styles.centered}>
                <Text style={styles.errorText}>{error.toString()} </Text>
                <Button title='Try Again' color={Colors.accent} onPress={loadStaff} />
            </View>
        </View>
    }

    if (isLoading) {
        return <View style={styles.container}>
            <View style={{ alignSelf: 'flex-start' }}><RichHeader title='Staff Directory' /></View>
            <View style={styles.search}>
                <TextInput style={styles.textInput} />
                <Ionicons name={Platform.OS === 'android' ? 'md-search' : 'ios-search'} size={35} color={Colors.darkerAccent} />
            </View>
            <View style={styles.centered}>
                <ActivityIndicator size='large' color={Colors.accent} />
            </View>
        </View>
    }

    return (
        <View style={styles.container}>
            <View style={{ alignSelf: 'flex-start' }}><RichHeader title='Staff Directory' /></View>
            <View style={styles.search}>
                <TextInput 
                    style={styles.textInput} 
                    onChangeText={textChangeHandler}
                    value={searchTerm}
                    />
                <Ionicons name={Platform.OS === 'android' ? 'md-search' : 'ios-search'} size={35} color={Colors.darkerAccent} />
            </View>
            <FlatList
                data={data}
                keyExtractor={item => item.emailAddress}
                renderItem={
                    itemData => (
                        <StaffItem
                            first={itemData.item.firstName}
                            last={itemData.item.lastName}
                            title={itemData.item.jobTitle}
                            ext={itemData.item.extension}
                            email={itemData.item.emailAddress}
                        />
                    )
                } />
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    textInput: {
        height: 30,
        width: '90%',
        fontSize: 24,
        paddingLeft: 20,
        color: Colors.darkerAccent
    },
    search: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 10,
        backgroundColor: 'white',
        paddingRight: 10,
        borderBottomColor: Colors.accent,
        borderBottomWidth: 1,
        borderTopColor: Colors.accent,
        borderTopWidth: 1,
        marginVertical: 10
    },
    centered: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    errorText: {
        fontFamily: 'open-sans-bold',
        fontSize: 20,
        textAlign: 'center',
        color: Colors.accent,
        textDecorationColor: Colors.darkerAccent
    }
});

export default StaffScreen;

Any help would be appreciated.

Answer 1

To show your data when your component loads, you should use useEffect with an empty array as second argument

useEffect(() => {
    loadStaff();
}, []);

Answer 2

I don't sure it is that but

---

  const [data, setData] = useState(staff);
  const staff = useSelector(state => state.staff.staffMembers);

---

you are using staff before declaring it as first values for data , what's later comes as FlatList data at initial render