React/TypeScript：在组件映射中优雅地处理异步数据渲染

import React from 'react';
import { Container, Card, Button } from 'react-bootstrap';
import { doc, getDoc } from 'firebase/firestore'; // 假设这是Firebase Firestore的导入

// 假设db是你的Firestore实例，UserData接口已定义
interface UserData {
    name: string;
    // ...其他用户数据
}

// 异步获取用户名的函数
// 注意：实际应用中db实例应从外部传入或通过Context获取
const getUserName = async (userId: string, db: any): Promise<string> => {
    // 假设用户数据存储在'users'集合中
    const docRef = doc(db, "users", userId);
    const userDocument = await getDoc(docRef);
    if (userDocument.exists()) {
        const userData = userDocument.data() as UserData;
        return userData.name;
    }
    return "未知用户";
};

interface Task {
    id: string;
    title: string;
    description: string;
    timeCreated: { toDate: () => Date };
    userID: string;
}

// 假设taskList和deleteTask函数已定义
const taskList: Task[] = [
    { id: '1', title: '任务A', description: '描述A', timeCreated: { toDate: () => new Date() }, userID: 'user1' },
    { id: '2', title: '任务B', description: '描述B', timeCreated: { toDate: () => new Date() }, userID: 'user2' },
];

const deleteTask = (task: Task, id: string) => {
    console.log(`Deleting task ${task.title} with id ${id}`);
    // 实际的删除逻辑
};

// 原始组件中尝试直接调用异步函数
const TaskListComponent: React.FC = ({ db }) => { // 假设db作为props传入
    return (
        <Container>
            <h1>任务列表</h1>
            {taskList?.map((task: Task) => (
                <Card key={task.id}>
                    <h3>{task.title}</h3>
                    <p>{task.description}</p>
                    <p>{task.timeCreated.toDate().toDateString()}</p>
                    {/* 这里会导致类型错误：Type 'Promise<string>' is not assignable to type 'ReactNode' */}
                    <p>创建者: {getUserName(task.userID, db)}</p> 
                    <Button variant="danger" onClick={() => deleteTask(task, task.id)}>删除任务</Button>
                </Card>
            ))}
        </Container>
    );
};

export default TaskListComponent;

import React, { useState, useEffect } from 'react';
import { doc, getDoc } from 'firebase/firestore'; // 假设这是Firebase Firestore的导入

// 假设UserData接口已定义
interface UserData {
    name: string;
    // ...其他用户数据
}

// 异步获取用户名的函数 (与父组件共享或在此处定义)
const getUserName = async (userId: string, db: any): Promise<string> => {
    const docRef = doc(db, "users", userId); // 从'users'集合获取用户数据
    const userDocument = await getDoc(docRef);
    if (userDocument.exists()) {
        const userData = userDocument.data() as UserData;
        return userData.name;
    }
    return "未知用户"; // 提供一个默认值或错误信息
};

interface UsernameDisplayProps {
    userId: string;
    db: any; // 传入Firestore db实例
}

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

    useEffect(() => {
        let isMounted = true; // 标记组件是否已挂载，防止在组件卸载后更新状态

        const fetchUsername = async () => {
            try {
                const fetchedName = await getUserName(userId, db);
                if (isMounted) { // 仅在组件挂载时更新状态
                    setUsername(fetchedName);
                }
            } catch (error) {
                console.error("获取用户名失败:", error);
                if (isMounted) {
                    setUsername("获取失败"); // 错误处理
                }
            }
        };

        fetchUsername();

        return () => {
            isMounted = false; // 清理函数，在组件卸载时将isMounted设为false
        };
    }, [userId, db]); // 依赖项：当userId或db变化时重新运行effect

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

export default UsernameDisplay;

import React from 'react';
import { Container, Card, Button } from 'react-bootstrap';
import UsernameDisplay from './UsernameDisplay'; // 导入新创建的组件
import { db } from './firebaseConfig'; // 假设db实例从这里导入

interface Task {
    id: string;
    title: string;
    description: string;
    timeCreated: { toDate: () => Date };
    userID: string;
}

const taskList: Task[] = [
    { id: '1', title: '任务A', description: '描述A', timeCreated: { toDate: () => new Date() }, userID: 'user1' },
    { id: '2', title: '任务B', description: '描述B', timeCreated: { toDate: () => new Date() }, userID: 'user2' },
];

const deleteTask = (task: Task, id: string) => {
    console.log(`Deleting task ${task.title} with id ${id}`);
    // 实际的删除逻辑
};

const TaskListComponent: React.FC = () => {
    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>