Question

目前正在尝试根据本教程制作一个 MERN Stack 网络应用程序：https://youtu.be/aibtHnbeuio 所以我对堆栈也很新，不知道如何解决这个问题...... 请帮忙

类型错误：无法读取未定义的属性“地图” 发布 C:/Users/I/Desktop/memories-pr/client/src/components/Posts/Post/Post.js:27

  24 |     </Button>
  25 | </div>
  26 | <div className={classes.details}>
> 27 |     <Typography variant="body2" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
     |   28 | </div>
  29 | <CardContent>
  30 |     <Typography className={classes.title}  variant="h5" gutterBottom > {post.message} </Typography>

（匿名函数） C:/Users/I/Desktop/memories-pr/client/src/actions/posts.js:8

 5 | try {
   6 |     const { data } = await api.fetchPosts();
   7 | 
>  8 |     dispatch({ type: 'FETCH_ALL', payload: data});
     | ^   9 | } catch (error) {
  10 |     console.log(error.message);
  11 | }

Answer 1

这可能是由异步获取 post 引起的，如果是这种情况，那么最初 post 的值将保持为 undefined，您将看到此错误。

使用空传播或条件渲染来避免此错误：

<Typography 
    variant="body2" 
    color="textSecondary"    
   component="h2">
     {post?.tags?.map((tag) => `#${tag} `)}
</Typography>

React.js 错误：TypeError：无法读取未定义的属性“地图”

1 个答案: