英文:
React - Calling a function of all class instances in an array state stored in a ContextProvider
问题
I have a provider that stores and adds 'People' to a state. This state is then exposed to the rest of the application. Everything works as expected, however when I get the instances of the classes I am unable to call their function. It returns undefined
whenever I try to call it. The code itself does not error, but also doesn't work. Do you have any insight as what might be going wrong?
Person class:
export class Person {
private name: string;
constructor() {
this.name = uniqueNamesGenerator(config);
}
getName() {
return this.name;
}
}
The 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>
);
};
The component:
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>
);
};
When looking in the console, all objects do have a name and a getName
function in their prototype. Any idea what might be causing the undefined here?
英文:
I have a provider that stores and adds 'People' to a state. This state is then exposed to the rest of the application. Everything works as expected, however when I get the instances of the classes I am unable to call their function. It returns undefined
whenever I try to call it. The code itself does not error, but also doesn't work. Do you have any insight as what might be going wrong?
Person class:
export class Person {
private name: string;
constructor() {
this.name = uniqueNamesGenerator(config);
}
getName() {
return this.name;
}
}
The 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>
);
};
The component
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>
);
};
When looking in the console, all objects do have a name and a getName
function in their prototype. Any idea what might be causing the undefined here?
答案1
得分: 0
Array.prototype.forEach
返回 undefined
尝试使用 map
方法
console.log(people.map(p => p.getName()))
或者使用 forEach
people.forEach(p => console.log(p.getName()))
英文:
As the docs mentioned https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Array.prototype.forEach
returns undefined
Try using map
method
console.log(people.map(p => p.getName()))
or with forEach
people.forEach(p => console.log(p.getName()))
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论