React中如何将函数获取的数组在JSX中渲染展示

你写的代码存在两个直接导致报错的问题：

• allDivs是getAllDivs函数内部的局部变量，函数执行结束后没有返回值，外部JSX作用域根本访问不到这个数组，自然会触发数组未找到的报错
• JSX是基于状态驱动渲染的，异步拉取到的数据如果存在普通变量里，就算拿到值也不会触发页面更新，没法自动渲染到视图上

1. 调整数据拉取函数，返回组装好的数组 #

在getAllDivs的最后加返回值，把收集到的内容数组暴露出去：

async function getAllDivs(){
  const querySnapshot = await getDocs(collection(db, "Div"))
  const allDivs = [];
  querySnapshot.forEach(doc => {
    // 如果你需要用到文档id，也可以一起存：allDivs.push({id: doc.id, ...doc.data()})
    allDivs.push(doc.data().DivContent);
  });
  // 新增：返回组装完成的数组
  return allDivs;
}

2. 用组件状态存储拉取结果，驱动JSX渲染 #

以React函数组件为例，用useState声明状态存储内容，点击触发拉取后把结果存入状态，JSX直接遍历状态值渲染即可，完整示例：

import { useState } from 'react';
// 注意替换成你自己项目里的firebase引入路径
import { db } from './firebase/config';
import { getDocs, collection } from 'firebase/firestore';

export default function ContentList() {
  // 声明状态：存拉取到的内容列表，初始值为空数组
  const [divList, setDivList] = useState([]);
  // 可选：加加载态和错误提示，提升交互体验
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  // 点击事件处理函数
  const handleFetch = async () => {
    setLoading(true);
    setError('');
    try {
      const contents = await getAllDivs();
      // 拿到数据后存入状态，自动触发页面重渲染
      setDivList(contents);
    } catch (err) {
      setError('内容拉取失败，请重试');
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <button onClick={handleFetch} disabled={loading}>
        {loading ? '加载中...' : '拉取所有内容'}
      </button>
      {error && <p className="error-tip">{error}</p>}
      <div className="content-container">
        {/* 遍历状态里的数组渲染内容 */}
        {divList.map((item, index) => (
          // 注意：如果存了文档id，这里key替换成item.id，不要长期用索引当key
          <div key={index} className="content-item">
            {item}
          </div>
        ))}
      </div>
    </div>
  )
}

• 列表渲染时的key属性尽量使用数据本身的唯一标识（比如Firebase文档自带的id），不要长期用数组索引，否则列表顺序变化时可能出现渲染异常
• 所有异步数据请求都建议加错误捕获和加载态，避免请求失败导致页面崩溃，同时给用户明确的交互反馈
• 不要在组件渲染过程中直接调用异步拉取函数，否则会触发重复请求、死循环等问题，要放在事件回调或者useEffect里执行

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