为什么 reat-admin 没有收到未加载记录(例如海报组件)的未定义异常?

Question

我正在查看 react-admin 演示代码，试图从中学习。我已经注意到很多次相同的行为：演示代码不等待record加载，也不会收到未定义的异常。我正在努力理解为什么他们没有得到未定义的异常。例如：在源代码PosterEdit，他们只是使用看起来像

const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}>
<img src={record.image} alt="" className={classes.img} />
</CardContent>
</Card>
);
};

如果我以相同的方式使用该组件，则会出现未定义的异常

TypeError: can't access property "image", record is undefined

我不明白演示代码中的魔力。有人可以揭开神秘面纱吗？

Answer 1

我找到了这个确切示例的答案。

我的海报组件被放置在 material-u 的几个Grid组件中。下面是用于显示结构的清理代码示例。

<Edit {...props} aside={<Aside />}>
<TabbedForm }>
<FormTab >
<Grid container fullWidth className={classes.tabContent}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom className={classes.sectionTitle}/>
<Poster 
</Grid>
</Grid>   
</Grid>
</Grid>
</FormTab >
..other form tabs..
</TabbedForm }>
</Edit>

如果组件直接作为子组件放置FormTab则它可以工作。我仍然不明白为什么。无论如何，我希望它对某人有所帮助。