Arrays react native flatlist hooks-使用对象数组呈现项

我有这样的数据api，希望在flatlist本地钩子上显示它。用于名称、句点和文件名。怎么做

"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",
            }
          ],
        }
      ]
    },
]

例如，我希望它显示如下：

但是，目前我只能像这样显示一个数据（只是名称），下面是为我检索flatlist数据时的基本代码

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>
 )
}

const cData=（）=>{
常量[filterData，setFilterData]=useState（[]）
useffect（（）=>{
GetData（）；
}, []);
常量GetData=（）=>{
//获取API
// ...
.then（（response）=>response.json（））
.然后（（responseJson）=>{
setFilterData（响应JSON）
//  ...
};
const ItemView=（{item}）=>{
返回(
名称：{item.Name.toUpperCase（）}
)
}
返回(
index.toString（）}
renderItem={ItemView}
/> 
)
}

像这样编写您的

cData.js

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;

const cData=（）=>{
常量[filterData，setFilterData]=useState（[]）；
useffect（（）=>{
GetData（）；
}, []);
const GetData=async（）=>{
//获取API
// ...
//.then（（response）=>response.json（））
//.然后（（responseJson）=>{
//setFilterData（响应JSON）
//  ...
};
const ItemView=（{item}）=>{
返回(
名称：{item.Name.toUpperCase（）}
);
};
返回(
index.toString（）}
renderItem={ItemView}
/>
);
};
导出默认cData；