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

Question

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

我的变量（我的 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;

Answer 1

有什么问题？

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

FlatList 有两个必需的 props，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 解释如何呈现列表中的每个项目。
• 在反应列表中赋予唯一的关键道具很重要。

Answer 2

问题出在步骤getUser异步函数中。

在这里，您创建一个循环，并在循环的每一轮使用setProducts 更新您的状态。

您必须将 setProducts 排除在循环之外，它应该可以工作：

const getUser = async () => {
   const q = query(collection(db, 'User'));
   // Here it's better in lowercase Array > array
   const array = [];
   const querySnapshot = await getDocs(q);
   querySnapshot.forEach((doc) => {
      const { title, describe, image, category } = doc.data();
      array.push({
         id: doc.id,
         title,
         describe,
         image,
         category
      });
   });
   setProducts(Array)
};

我也认为你可以不用PlainList：

{products ? (products.map((item, index) => {
      const { id, describe, title } = item;
      return (
         <div key={index}>
            <h2>{id}</h2>
            <h2>{describe}</h2>
            <h2>{title}</h2>
         </div>
      );
   })) : (
      <Empty />
   )
}