Javascript 未捕获类型错误：无法读取属性'；缪南'；未定义的

我试图渲染网格中自定义卡组件中的数组元素。但当页面打开时，它会冻结，控制台显示“UncaughtTypeError:无法读取未定义的属性'muiName'”

自定义组件

LookupMedication = (medicationName) => {
    return (
      <Grid xs={3} item>
        <Card
          style={{
            width: "18em",
            marginBottom: "2em",
          }}
        >
          <CardActionArea>
            <CardMedia
              style={{
                height: "8em",
              }}
              image={Meds}
              title={medicationName}
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="h2">
                {medicationName}
              </Typography>
              <TextField
                fullWidth
                label="Amount Available"
                variant="outline"
                type="number"
              ></TextField>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button
              fullWidth
              style={{
                color: "white",
                backgroundColor: "#1818",
              }}
              startIcon={<PostAddIcon />}
            >
              Add
            </Button>
          </CardActions>
        </Card>
      </Grid>
    );
  };

lookupmedicing=（药物名称）=>{
返回(
{medicationName}
添加
);
};

地图功能

<Grid container>
          {this.medications.map((medication) =>
            this.LookupMedication(medication)
          )}
        </Grid>

{this.medicines.map（（medicing）=>
这个。查找药物（药物）
)}

非常感谢您的帮助

您需要将muiName添加到组件中 在lookup下面，只需添加代码

LookupMedication.muiName = 'Grid';

---

有关muiName的更多详细信息，请查看此

显示实现muiName的代码