分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了react native flatlist hooks - 用对象数组渲染项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Native flatlist hooks - 用对象数组渲染项目？

开发过程中遇到React Native flatlist hooks - 用对象数组渲染项目的问题如何解决？下面主要结合日常开发的经验，给出你关于React Native flatlist hooks - 用对象数组渲染项目的解决方法建议，希望对你解决React Native flatlist hooks - 用对象数组渲染项目有所启发或帮助；

我有这样的数据 API，想将它显示在 flatList React Native hooks 上。用于名称、句点和文件名。怎么做

"@R_566_10586@l": "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","period":"Annual"
          "files": [
            {
              "ID_file": "208","filename": "document2.pdf","ID_data_cat": "143",]

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

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

但是，目前我只能像这样显示一个数据（只是名称），下面是为我检索 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>
 )
}

解决方法

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