react native flatlist hooks - 使用 object 数组渲染项目

Question

i have the data api like this, want to display it on flatlist react native hooks. for name, period, and filename. how to do it

"total": "2",
"data": [
    {
      "id": "1",
      "name": "john",
      "data_cat": [
        {
          "id_data_cat": "142",
          "date":"2021-04-28",
          "period":"monthly",
          "files": [
            {
              "id_file": "207",
              "filename": "document1.pdf",
              "id_data_cat": "142",
            }
          ],
        }
      ]
    },
    {
      "id": "2",
      "name": "kate",
      "data_cat": [
        {
          "id_data_cat": "143",
          "date":"2021-04-28",
          "period":"annual"
          "files": [
            {
              "id_file": "208",
              "filename": "document2.pdf",
              "id_data_cat": "143",
            }
          ],
        }
      ]
    },
]

for example i want it will appear like this:

but, currently I can only display one data (just name) like this, below is the basic code when retrieving the flatlist data for me

const cData = () => {
  const[filterData,setFilterData]=useState([]) 
 
  useEffect(() => {
    GetData();
  }, []);

  const GetData = () => {
    // fetching API
    // ...
      .then((response) => response.json())
           .then((responseJson) => {
              setFilterData(responseJson)
    //  ...
  };

  const ItemView=({item}) => {
      return (
        <Text style={styles.itemStyle}>
         Name: {item.name.toUpperCase()}
        </Text>
      )
    }
  
 return (
 <View style={{padding:5}}>
 <FlatList
       data={filterData.data}
       keyExtractor={(item,index)=>index.toString()}
       renderItem={ItemView}
  /> 
  </View>
 )
}

Answer 1

Write your cData.js like this

const cData = () => {
  const [filterData, setFilterData] = useState([]);

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

  const GetData = async () => {
    // fetching API
    // ...
    //  .then((response) => response.json())
    //       .then((responseJson) => {
    //          setFilterData(responseJson)
    //  ...
  };

  const ItemView = ({ item }) => {
    return (
      <Text style={styles.itemStyle}>Name: {item.name.toUpperCase()}</Text>
    );
  };

  return (
    <View style={{ padding: 5 }}>
      <FlatList
        data={filterData.data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={ItemView}
      />
    </View>
  );
};

export default cData;