React使用flatlist-react渲染Firebase数据仅返回单个对象排查

问题原因 #

有两个核心错误导致你只渲染了单个对象：

• 状态更新逻辑错误：你在forEach遍历每条Firebase文档的过程中就调用setProducts，此时数组还没填充完全，React异步更新状态可能出现渲染异常，正确逻辑应该是所有数据都收集完成后再一次性更新状态。
• FlatList用法错误：flatlist-react本身就负责遍历数组渲染列表，不需要你在外部套products.map，你现在的写法是给每个数组元素单独创建一个FlatList，还把单个对象传给需要接收完整数组的参数，自然只会渲染一条数据。

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import '../App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { collection, query, 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({
    // 你的Firebase配置
});
const db = getFirestore();

const Allproducts = () => {
    // 初始化默认空数组，避免undefined异常
    const [ products, setProducts ] = useState([]);

    const getUser = async () => {
        const q = query(collection(db, 'User'));
        // 不要用Array做变量名，这是JS内置构造函数标识符，容易冲突
        const productArray = [];
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
            productArray.push(doc.data());
        });
        // 所有数据收集完成后再一次性更新状态
        setProducts(productArray);
    };

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

    // 定义单个列表项的渲染逻辑
    const renderProduct = (item) => {
        return (
            <div>
                <h2>{item.title}</h2>
                <h2>{item.describe}</h2>
            </div>
        )
    }

    return (
        <div className="container-fluid css-selector m-0 p-0" style={{ height: '100vh' }}>
            <div>
                {products.length > 0 ? (
                    <FlatList 
                        list={products} 
                        renderItem={renderProduct}
                        plainList={true}
                    />
                ) : (
                    <h1>Hi</h1>
                )}
            </div>
        </div>
    );
};

export default Allproducts;

关键修改说明 #

1. 移除了外层多余的products.map遍历，直接将完整的产品数组传给FlatList的list参数，通过renderItem属性定义每个列表项的渲染逻辑
2. 把setProducts移到forEach循环外部，等所有Firebase数据都收集完成后再一次性更新状态
3. 修正了变量命名，避免和JS内置的Array构造函数重名
4. 给products状态添加了空数组默认值，简化非空判断逻辑

内容的提问来源于stack exchange，提问作者Thedreamer