React与TypeScript中异步数据在列表渲染中的处理策略

// 假设 getUserName 是一个异步函数
const getUserName = async (userID: string): Promise<string> => {
    // ... 异步获取用户名的逻辑
    return "Fetched Username"; // 示例返回值
};

// 在组件的渲染部分
{taskList?.map((task: Task) => (
    <Card key={task.id}>
        {/* ... 其他任务信息 */}
        <p>Created By: {getUserName(task.userID)}</p> {/* 问题所在行 */}
    </Card>
))}

import { doc, getDoc } from 'firebase/firestore'; // 假设使用Firebase Firestore
import { db } from './firebaseConfig'; // 您的Firebase配置

// 定义UserData接口，假设用户数据包含name字段
interface UserData {
    name: string;
    // ... 其他用户数据
}

const getUserName = async (userID: string): Promise<string> => {
    try {
        // 注意：原始问题中的路径可能是 "tasks/" + taskID，这里应为 "users/" + userID
        // 假设用户数据存储在 "users" 集合中
        const userDocRef = doc(db, "users", userID); // 正确的Firestore路径
        const userDocument = await getDoc(userDocRef);

        if (userDocument.exists()) {
            const userData = userDocument.data() as UserData;
            return userData.name;
        } else {
            console.warn(`User with ID ${userID} not found.`);
            return "未知用户"; // 或者返回空字符串、占位符
        }
    } catch (error) {
        console.error("Error fetching username:", error);
        return "加载失败"; // 处理错误情况
    }
};

import React, { useState, useEffect } from 'react';

interface UsernameProps {
    userId: string;
}

const Username: React.FC<UsernameProps> = ({ userId }) => {
    const [username, setUsername] = useState<string>('加载中...'); // 初始状态为加载中

    useEffect(() => {
        let isMounted = true; // 用于防止组件卸载后状态更新的标志

        const fetchUsername = async () => {
            if (!userId) {
                setUsername('N/A'); // 如果没有userId，则显示N/A
                return;
            }
            try {
                const fetchedName = await getUserName(userId); // 调用异步函数
                if (isMounted) { // 仅在组件挂载时更新状态
                    setUsername(fetchedName);
                }
            } catch (error) {
                console.error("Failed to fetch username:", error);
                if (isMounted) {
                    setUsername('加载失败'); // 错误处理
                }
            }
        };

        fetchUsername();

        return () => {
            isMounted = false; // 组件卸载时设置标志为false
        };
    }, [userId]); // 当userId变化时重新运行effect

    return <span>{username}</span>;
};

export default Username;

import React from 'react';
import { Container, Card, Button } from 'react-bootstrap'; // 假设使用React Bootstrap
import Username from './Username'; // 导入新创建的Username组件

// 假设 Task 接口和 deleteTask 函数已定义
interface Task {
    id: string;
    title: string;
    description: string;
    timeCreated: {
        toDate: () => Date; // 模拟Firestore Timestamp的toDate方法
    };
    userID: string;
}

interface TaskListComponentProps {
    taskList: Task[];
    deleteTask: (task: Task, id: string) => void;
}

const TaskListComponent: React.FC<TaskListComponentProps> = ({ taskList, deleteTask }) => {
    return (
        <Container style={{ width: 'auto', border: 'solid 0.2rem', borderRadius: '2rem', marginTop: '2rem', padding: '3rem' }}>
            <h1>Tasks</h1>
            {taskList?.map((task: Task) => (
                <Card key={task.id} style={{ width: '30rem', padding: '2rem', marginBottom: '1rem' }}>
                    <h3>{task.title}</h3>
                    <p>{task.description}</p>
                    <p>{task.timeCreated.toDate().toDateString()}</p>
                    {/* 使用 Username 子组件来显示创建者 */}
                    <p>Created By: <Username userId={task.userID} /></p>
                    <Button variant="danger" onClick={() => deleteTask(task, task.id)}>Delete Task</Button>
                </Card>
            ))}
        </Container>
    );
};

export default TaskListComponent;