react native flatlist hooks - 使用对象数组渲染项目答案

【问题标题】：react native flatlist hooks - render item with array of objectreact native flatlist hooks - 使用对象数组渲染项目
【发布时间】：2021-04-28 07:42:52
【问题描述】：

我有这样的数据 api，想在 flatlist react native hooks 上显示它。用于名称、句点和文件名。怎么做

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

例如，我希望它看起来像这样：

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

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

【问题讨论】：

标签： arrays react-native hook react-native-flatlist flatlist

【解决方案1】：

像这样写你的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;

【讨论】：