在React和TypeScript中高效展示异步函数返回的字符串

// 假设这是父组件的渲染部分
return (
    <>
        {taskList?.map((task: Task) => (
            <Card key={task.id}>
                <h3>{task.title}</h3>
                <p>Created By: {getUserName(task.userID)}</p> {/* 问题所在 */}
            </Card>
        ))}
    </>
);

// getUserName 函数示例
const getUserName = async(userID: string) : Promise<string> => {
    // 假设这里是调用Firebase或其他数据库获取用户名的逻辑
    const userDocRef = doc(db, "users", userID);
    const userSnapshot = await getDoc(userDocRef);
    if (userSnapshot.exists()) {
        return (userSnapshot.data() as UserData).name;
    }
    return "未知用户";
};

// UsernameDisplay.tsx
import React, { useState, useEffect } from 'react';
import { doc, getDoc } from 'firebase/firestore'; // 假设使用Firebase Firestore
import { db } from './firebaseConfig'; // 假设你的Firebase配置在此文件

interface UserData {
    name: string;
    // ... 其他用户数据属性
}

interface UsernameDisplayProps {
    userId: string;
}

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

    useEffect(() => {
        let isMounted = true; // 用于处理组件卸载后异步操作完成的情况

        const fetchUsername = async () => {
            try {
                const userDocRef = doc(db, "users", userId); // 假设用户数据存储在'users'集合中
                const userSnapshot = await getDoc(userDocRef);

                if (isMounted && userSnapshot.exists()) {
                    const userData = userSnapshot.data() as UserData;
                    setUsername(userData.name);
                } else if (isMounted) {
                    setUsername('未知用户'); // 用户不存在
                }
            } catch (error) {
                if (isMounted) {
                    console.error("获取用户名失败:", error);
                    setUsername('获取失败'); // 处理错误情况
                }
            }
        };

        if (userId) { // 只有当userId存在时才进行数据获取
            fetchUsername();
        } else {
            setUsername('N/A'); // 如果没有userId
        }

        return () => {
            isMounted = false; // 组件卸载时标记为false，避免状态更新
        };
    }, [userId]); // 依赖项数组，当userId变化时重新运行effect

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

export default UsernameDisplay;

// 父组件 TaskList.tsx
import React from 'react';
import { Container, Card, Button } from 'react-bootstrap'; // 假设使用React Bootstrap
import UsernameDisplay from './UsernameDisplay'; // 导入我们创建的组件
import { Task } from './types'; // 假设Task类型定义在此文件
import { deleteTask } from './firebaseUtils'; // 假设删除任务的函数

interface TaskListProps {
    taskList: Task[];
}

const TaskList: React.FC<TaskListProps> = ({ taskList }) => {
    return (
        <Container style={{ width: 'auto', border: 'solid 0.2rem', borderRadius: '2rem', marginTop: '2rem', padding: '3rem' }}>
            <h1>任务列表</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>
                    <p>
                        创建者: <UsernameDisplay userId={task.userID} /> {/* 在这里使用子组件 */}
                    </p>
                    <Button variant="danger" onClick={() => deleteTask(task, task.id)}>删除任务</Button>
                </Card>
            ))}
        </Container>
    );
};

export default TaskList;