时间戳

首页 > 解决方案 > 我想制作一个呈现所有数据的 FlatList

reactjs - 我想制作一个呈现所有数据的 FlatList

问题描述

但是，它们只返回一个数组！

我的变量（我的 bdd Firebase 的内容）包含以下内容：

Array [ {…}, {…} ]
​
0: Object { title: "boissonstitle", category: "boissons", describe: "boissonsdesc", … }
​
1: Object { title: "Oeuf en neige", category: "Desserts", describe: "Les œufs à la neige sont un entremets ou dessert de la cuisine française composé de blancs d'œufs sucrés, fouettés, pochés ou cuits au bain-marie, accompagnés d'une crème anglaise et généralement nappés de caramel", … }
​
2: Object { category: "Entrées", describe: "Entréesdesc", title: "Entréestitle", … }
​
3: Object { title: "repastitle", category: "repas", describe: "repasdesc", … }
​
length: 4

套间，enfin，然后我做这个：

return (
        <div className="container-fluid css-selector m-0 p-0" style={{ height: '100vh' }}>
            <div>
                {products ? (
                    products.map((item) => {
                        return (
                            <div>
                                {/* Liste d'items à afficher  */}
                                <FlatList data={item} plainList={true} list={item} />
                                <h2>{item.title}</h2>
                                <h2>{item.describe}</h2>
                            </div>
                        );
                    })
                ) : (
                    <h1>Hi</h1>
                )}
            </div>
        </div>
    );
};

但是它们只返回一个对象，为什么它们不对所有对象进行迭代？

这是我的整个代码：

import React, { useState, useEffect } from 'react';
import '../App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { collection, query, where, getDocs } from 'firebase/firestore';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import FlatList from 'flatlist-react';
import Empty from './Empty';

const firebaseApp = initializeApp({
    // Myconfig
});
const db = getFirestore();

const Allproducts = () => {
    const [ products, setProducts ] = useState(); // description
    const [ title, setTitle ] = useState();

    // console.log(products);

    const getUser = async () => {
        const q = query(collection(db, 'User'));
        const Array = [];
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            Array.push(doc.data());
            setProducts(Array);
        });
    };

    console.log(products);

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

    return (
        <div className="container-fluid css-selector m-0 p-0" style={{ height: '100vh' }}>
            <div>
                {products ? (
                    products.map((item) => {
                        return (
                            <div>
                                {/* Liste d'items à afficher  */}
                                <FlatList data={item} plainList={true} list={item} />
                                <h2>{item.title}</h2>
                                <h2>{item.describe}</h2>
                            </div>
                        );
                    })
                ) : (
                    <h1>Hi</h1>
                )}
            </div>
        </div>
    );
};

export default Allproducts;

标签： reactjsjavascript-objectsarray.prototype.map

解决方案

有什么问题 ？

您没有正确使用 FlatList。医生这样说：

FlatList 有两个必需的道具，list和renderItem。

在您的代码中，您尝试在列表中编写一个列表。你好，创始！

你忘记了 renderItem 道具。

如何解决？

import FlatList, { PlainList } from 'flatlist-react'

const Allproducts = () => {
   const list = [
     { title: "Harry Potter 1", description: "Tome 1" },
     { title: "Harry Potter 2", description: "Tome 2" },
   ];

   function renderedItem(item, index) {
      // Destructurate each item
      const { title, description } = item;

      // Don't forget key prop on each items
      return (
         <div key={index}>
            <h2>{title}</h2>
            <h2>{description}</h2>
         </div>
      );
   } 

   return (
      <PlainList
         list={list}
         renderItem={renderedItem}
      />
   );
}

解释

  • 首先，您有一个名为 list 的项目，FlatList 将对其进行迭代。
  • 其次，您有一个名为 renderItem 的函数，它将向 FlatList 解释如何呈现列表中的每个项目。
  • 在反应列表中赋予唯一的关键道具很重要。

推荐阅读