React项目中从FireStore获取多文档后仅渲染最新文档的问题求助

你遇到的问题核心是React状态更新的闭包特性导致的：在forEach循环里调用setAlims([...alims, datas])时，每次循环捕获的alims都是组件初始渲染时的空数组，所以每次更新后数组里只会保留当前循环的元素，最后就只剩最后一条数据了。

另外先提个小笔误：你的useEffect里调用的是getSatim()，但定义的函数是getAlim，这会导致数据根本不会加载，得先把这个名字改一致。

下面给你两种可行的修复方案：

方案1：先收集所有数据再一次性更新状态 #

这种方式更高效，避免多次触发状态更新：

const getAlim = async() => {
  const colRefBuy = collection(db, "alim");
  const docsSnap = await getDocs(colRefBuy);
  // 先把所有数据存到临时数组里
  const alimList = [];
  docsSnap.forEach(docBuy => {
    const dataRaw = docBuy.data();
    const dataStr = `${dataRaw.name} : ${dataRaw.value}TL, ${dataRaw.price} Adet`;
    alimList.push(dataStr);
  });
  // 一次性更新状态
  setAlims(alimList);
}

方案2：使用函数式更新获取最新状态 #

React的setState支持传入一个函数，这个函数会接收当前最新的状态值，这样每次循环都能基于最新的数组添加元素：

const getAlim = async() => {
  const colRefBuy = collection(db, "alim");
  const docsSnap = await getDocs(colRefBuy);
  docsSnap.forEach(docBuy => {
    const dataRaw = docBuy.data();
    const dataStr = `${dataRaw.name} : ${dataRaw.value}TL, ${dataRaw.price} Adet`;
    // 用函数式更新，prevAlims是当前最新的状态数组
    setAlims(prevAlims => [...prevAlims, dataStr]);
  });
}

最后修正useEffect里的函数名：

useEffect(() => {
  getAlim(); // 改成getAlim，和定义的函数名一致
}, []);

这样修改后，页面就能正确渲染所有3条文档数据了。

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