I’m having an issue with my React Native application where the data fetched from my API is not displaying in the FlatList component. Other parts of the code work fine, but this particular component doesn’t seem to render the fetched data.

Here is my component code:

applylecturelist.js

import React, { useState, useEffect } from "react";
import { View, SafeAreaView, FlatList, StyleSheet, Text, Pressable } from "react-native";
import MyRequestAppliesList from "../../../apiservice/myrequestapplies";
import colors from "../../../assets/color/color";
import SmallButton from "../../../components/button/smallbutton";
import { useUser } from "../../../AppointmentContext";
import TextButton from "../../../components/button/textbutton";
import FloatingButton from "../../../components/button/floatingbutton";
import { useNavigation } from "@react-navigation/native";

const ApplyLectureList = () => {
  const { user } = useUser();
  const navigation = useNavigation();

  const getlecture = () => {
    console.log("button clicked !!");
  };

  const handleLecturePress = (requestId) => {
    navigation.navigate('MainTabs', {
      screen: 'MainStack',
      params: {
        screen: 'LectureDetail',
        params: { requestId }
      },
    });
  };

  const [lectures, setLectures] = useState([]);

  useEffect(() => {
    const fetchLectures = async () => {
      try {
        const data = await MyRequestAppliesList(); // API 호출
        console.log('Fetched data:', data); // 데이터가 올바르게 가져와지는지 확인
        setLectures(data); // 상태 업데이트
      } catch (error) {
        console.error('Failed to fetch lectures:', error);
      }
    };
    fetchLectures();
  }, []); // 컴포넌트가 마운트될 때 한 번만 실행

  const Item = ({ subject, content, targetAudience, place, date, startTime, endTime, onOffline, user_id, request_id }) => {
    return (
      <View style={styles.item}>
        <TextButton title={subject} onPress={() => handleLecturePress(request_id)} fontSize={21} />
        <Text style={styles.description}>{content}</Text>
        <Text style={styles.target}>???? {targetAudience}</Text>
        <Text style={styles.place}>???? {place}</Text>
        <Text style={styles.dateTime}>???? {date} {startTime} ~ {endTime}</Text>
        <Text style={styles.onOffline}>{onOffline}</Text>
        {user.user_id === user_id && (
          <View style={styles.buttonContainer}>
            <SmallButton title="수정" onPress={getlecture} />
            <SmallButton title="삭제" onPress={getlecture} color={colors.red.red7} />
          </View>
        )}
        {user.user_type === '강사' && user.user_id !== user_id && (
          <View style={styles.buttonContainer}>
            <SmallButton title="지원" onPress={getlecture} />
          </View>
        )}
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      {lectures.length > 0 ? (
        <FlatList
          data={lectures}
          renderItem={({ item }) => (
            <Item
              subject={item.request_subject}
              content={item.request_content}
              targetAudience={item.request_targetAudience}
              place={item.request_place}
              date={item.request_date}
              startTime={item.request_startTime}
              endTime={item.request_endTime}
              onOffline={item.request_onOffline}
              user_id={item.user_id} // 추가
              request_id={item.request_id}
            />
          )}
          keyExtractor={item => item.request_id.toString()} // 고유한 키 사용
          contentContainerStyle={styles.contentContainer}
        />
      ) : (
        <Text>No lectures available</Text>
      )}
      <FloatingButton title="+" user_type={user.user_type} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  contentContainer: {
    paddingBottom: 40, // 마지막 항목을 위해 여백 추가
  },
  item: {
    padding: 10,
    marginVertical: 10,
    marginHorizontal: 10,
    borderWidth: 0.5,
    borderColor: colors.gray6,
    borderRadius: 12,
  },
  description: {
    fontSize: 16,
    color: 'black',
    marginVertical: 5,
  },
  place: {
    fontSize: 16,
    color: 'black',
    marginVertical: 5,
  },
  target: {
    fontSize: 16,
    color: 'black',
    marginVertical: 5,
  },
  dateTime: {
    fontSize: 16,
    color: 'black',
    marginVertical: 5,
  },
  onOffline: {
    fontSize: 16,
    color: colors.black.black,
    marginVertical: 5,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginVertical: 5,
  },
});

export default ApplyLectureList;

datas
enter image description here

UI
enter image description here

please help me..

Other codes show up, but I’m not sure why they can’t only show up in this code.