React中ContextProvider数组状态内类实例方法调用返回undefined问题排查

我有一个Provider用于存储并向state中添加Person类实例，该状态会暴露给应用其余部分。一切按预期运行，但当获取类实例后调用其方法时，返回值始终为undefined。代码本身无报错，但无法正常工作。控制台中可以看到，所有对象都包含name属性，且原型中有getName方法。

Person类代码 #

export class Person {
    private name: string;
    constructor() {
        this.name = uniqueNamesGenerator(config);
    }

    getName() {
        return this.name;
    }
}

Provider代码 #

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>
    );
};

组件代码 #

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

    const add = () => {
        addPerson();
    };

    const getNames = () => {
        const people = getInstances();
        console.log(people);
        console.log(people.forEach(p => p.getName())); // <==== undefined
    };

    return (
        <Grid container>
            <Grid item xs={2}>
                <Typography>Settings</Typography>

                <Button onClick={add}>add</Button>

                <Button onClick={getNames}>get names</Button>
            </Grid>

            <Grid item xs={10}>
                <Typography>Side</Typography>
            </Grid>
        </Grid>
    );
};

问题原因与解决方案 #

问题出在**forEach方法本身**——它的设计是用于遍历数组并执行操作，没有返回值，始终返回undefined，和你的Person类实例、React状态管理逻辑完全无关。你现在是直接打印forEach的返回值，所以得到undefined。

正确写法 #

如果要获取所有name组成的数组，使用map方法：

const getNames = () => {
    const people = getInstances();
    const names = people.map(p => p.getName());
    console.log(names); // 输出包含所有name的数组
};

如果只是需要逐个打印每个实例的name，把console.log放在forEach内部：

const getNames = () => {
    const people = getInstances();
    people.forEach(p => console.log(p.getName())); // 逐个打印每个name
};

你的Person类逻辑、Provider的状态管理都是正常的，只是误用了数组方法——记住forEach做遍历操作，map用于生成新数组。

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