使用React与Firestore数据库出现图片无限循环，如何正确获取数据？

无限循环触发原因 #

• 你的useEffect没有配置依赖数组，这会导致每一轮组件渲染完成后都会重新执行useEffect内部的拉取逻辑，拉取完成后调用setResults更新状态，状态更新又触发组件重新渲染，形成死循环。
• 你在querySnapshot.forEach循环中反复调用setResults，每次更新都依赖当前的results旧状态，会额外触发多次重复渲染，也会导致数据重复叠加的问题。

渲染异常的原因 #

• 原生<aside>标签不支持src属性，你想展示日志内容直接把内容写到标签内部即可。
• 如果travelphotos字段存储的是图片地址数组，你现有写法只会渲染第一张或者直接报错，需要额外遍历处理。

完整修复代码 #

import { useState, useContext, useEffect } from 'react';
import {firebaseLooper} from '../tools/firebaselooper';
import { usersCollection } from '../tools/firebase';
import { AuthContext } from "./AuthConnect";

const ViewOneAdventure = (props) => {
    const {currentUser, userDetails} = useContext(AuthContext);
    const [results, setResults] = useState([]);
    const currentLocationId = props.location.state.id

    useEffect(() => {
        // 加兜底判断，避免currentUser未加载完成时报错
        if (!currentUser?.uid || !currentLocationId) return
        usersCollection
        .doc(currentUser.uid)
        .collection('locations')
        .doc(currentLocationId)
        .collection('dates')
        .get()
        .then((querySnapshot) => {
            // 先把所有数据收集到临时数组，一次性更新状态
            const tempList = []
            querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data());
                tempList.push(doc.data())
            });
            setResults(tempList)
        });
    // 添加依赖数组，只有依赖项变化时才重新拉取数据
    }, [currentUser?.uid, currentLocationId]);

    return(
        <div>
            {results.map((result) => (
                <aside key={result.day}>
                    {/* 直接展示日志内容，不要给aside加src属性 */}
                    <aside>{result.journalentry}</aside>
                    {/* 如果travelphotos是单张地址直接用，是数组的话再加一层map遍历 */}
                    <img 
                        src={result.travelphotos} 
                        alt="旅行照片"
                    />
                </aside>
            ))}
        </div>
    )
}
export default ViewOneAdventure;

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