React Context中管理类实例并正确调用其方法的实践指南

// Person.ts
export class Person {
    private name: string;

    constructor() {
        // 实际应用中可能使用更复杂的逻辑生成唯一名称
        this.name = `GeneratedName_${Math.random().toString(36).substring(2, 7)}`;
    }

    getName(): string {
        return this.name;
    }
}

// PeopleProvider.tsx
import React, { createContext, useState, useContext, PropsWithChildren } from 'react';
import { Person } from './Person'; // 假设Person类在单独的文件中

// 定义实例接口，确保类型安全
interface IPerson {
    getName(): string;
}

// 定义Context的类型
interface PeopleContextType {
    addPerson: () => void;
    getInstances: () => IPerson[];
}

// 创建Context
const PeopleContext = createContext<PeopleContextType | undefined>(undefined);

// 自定义Hook，方便组件消费Context
export const usePeople = () => {
    const context = useContext(PeopleContext);
    if (!context) {
        throw new Error('usePeople must be used within a PeopleProvider');
    }
    return context;
};

// PeopleProvider组件
export const PeopleProvider = ({ children }: PropsWithChildren) => {
    const [people, setPeople] = useState<IPerson[]>([]);

    const addPerson = () => {
        setPeople([...people, new Person()]);
    };

    const getInstances = (): IPerson[] => {
        return people;
    };

    return (
        <PeopleContext.Provider value={{ addPerson, getInstances }}>
            {children}
        </PeopleContext.Provider>
    );
};

// Home.tsx
import React from 'react';
import { Button, Grid, Typography } from '@mui/material'; // 假设使用 Material-UI
import { usePeople } from './PeopleProvider'; // 导入 usePeople hook

export const Home = () => {
    const { addPerson, getInstances } = usePeople();

    const add = () => {
        addPerson(); // 添加一个新的Person实例
    };

    const getNames = () => {
        const people = getInstances();
        console.log("当前People实例数组:", people); // 打印实例数组，可以看到每个实例都有getName方法

        // 尝试获取所有实例的名称并打印，但这里会输出 undefined
        console.log("forEach的返回值 (错误用法):", people.forEach(p => p.getName()));
    };

    return (
        <Grid container>
            <Grid item xs={2}>
                <Typography variant="h6">设置</Typography>
                <Button variant="contained" onClick={add} sx={{ mr: 1 }}>添加人物</Button>
                <Button variant="outlined" onClick={getNames}>获取姓名 (查看控制台)</Button>
            </Grid>
            <Grid item xs={10}>
                <Typography variant="h6">内容区域</Typography>
                {/* 这里可以渲染人物列表等 */}
            </Grid>
        </Grid>
    );
};

// 在 Home.tsx 的 getNames 函数中
const getNames = () => {
    const people = getInstances();
    console.log("当前People实例数组:", people);

    // 使用 map 方法获取所有实例的名称，并将其收集到一个新数组中
    const names = people.map(p => p.getName());
    console.log("使用 map 获取的姓名数组:", names); // 输出一个包含所有名称的数组
};

当前People实例数组: [...] // 包含 Person 实例的数组
使用 map 获取的姓名数组: ["GeneratedName_abcde", "GeneratedName_fghij", ...] // 包含所有名称的字符串数组

// 在 Home.tsx 的 getNames 函数中
const getNames = () => {
    const people = getInstances();
    console.log("当前People实例数组:", people);

    console.log("使用 forEach 逐个打印姓名:");
    // 将 console.log 放在 forEach 的回调函数内部
    people.forEach(p => console.log(p.getName())); // 每个名称都会被单独打印
};

当前People实例数组: [...] // 包含 Person 实例的数组
使用 forEach 逐个打印姓名:
GeneratedName_abcde
GeneratedName_fghij
...