为什么reat-admin在未加载记录（如Poster组件）的情况下不会出现未定义异常？

Question

我正在看react-admin的演示代码，试图从中学习。我注意到不少时候有同样的行为：demo代码没有等待一个 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

我找到了这个例子的答案。

我的Poster组件被放置在几个 Grid 材料-u的组件。下面是清理后的代码示例，以显示结构。

<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 子，那么它的工作。不过我还是不明白为什么。总之，希望能帮到别人。