如何在TypeScript中先初始化React状态变量Map的键

完全可以先把userDataMap的初始键设置为users数组中的用户名，之后再逐步填充对应的UserData值。下面分两种场景给出实现方式：

1. 初始化时直接构建带键的Map #

如果users是组件初始化时就能拿到的静态/同步数据，直接在useState里初始化Map即可：

export const MyComponent: React.FC<Props> = props => {
    const users = getUsernames();

    // 初始化Map，键为users中的用户名，值先设为null（或符合UserData结构的默认值）
    const [userDataMap, setUserDataMap] = React.useState<Map<string, UserData | null>>(
        new Map(users.map(username => [username, null]))
    );

    // 后续填充UserData的示例函数
    const fillUserData = (username: string, userData: UserData) => {
        setUserDataMap(prevMap => {
            const updatedMap = new Map(prevMap);
            updatedMap.set(username, userData);
            return updatedMap;
        });
    };

    // 调用示例：比如从接口获取数据后填充
    // fillUserData("Alice", { id: 1, name: "Alice", email: "alice@example.com" });

    return ();
};

注意这里类型要改成Map<string, UserData | null>，因为初始值是null；如果你的UserData有默认结构，也可以用{}或默认实例代替null，让类型更严谨。

2. 动态监听users变化（适用于users可能更新的场景） #

如果users是动态变化的（比如来自props、异步请求返回），需要用useEffect监听users的变化，同步更新userDataMap的键：

export const MyComponent: React.FC<Props> = props => {
    const users = getUsernames();

    const [userDataMap, setUserDataMap] = React.useState<Map<string, UserData | null>>(new Map());

    React.useEffect(() => {
        const updatedMap = new Map(userDataMap);
        
        // 添加新出现的用户键
        users.forEach(username => {
            if (!updatedMap.has(username)) {
                updatedMap.set(username, null);
            }
        });

        // 移除已不存在的用户键
        for (const [username] of updatedMap) {
            if (!users.includes(username)) {
                updatedMap.delete(username);
            }
        }

        setUserDataMap(updatedMap);
    }, [users]);

    // 填充数据的函数同上
    const fillUserData = (username: string, userData: UserData) => {
        setUserDataMap(prevMap => {
            const updatedMap = new Map(prevMap);
            updatedMap.set(username, userData);
            return updatedMap;
        });
    };

    return ();
};

这种方式能保证userDataMap的键始终和users数组同步，新增用户时自动添加键，用户移除时也同步删除对应的键。

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