React中出现Cannot read properties of undefined(reading 'map')错误求助

在尝试展示posts列表时出现如下错误：

Cannot read properties of undefined (reading 'map')

错误栈信息：

Post.jsx:22 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Post (Post.jsx:22:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performSyncWorkOnRoot (react-dom.development.js:26096:1)

相关代码 #

Posts.jsx #

const Posts =  () => {
  const posts =  useSelector((state)=>(state.posts))
  console.log(posts.length)
  const classes = useStyles()
  return (
    !posts.length ? <CircularProgress /> : (
      <Grid className={classes.container} container alignItems="stretch" spacing={3}>
        {posts?.map((post) => (
          <Grid key={post._id} item xs={12} sm={6} md={6}>
            <Post post={post}  />
          </Grid>
        ))}
      </Grid>
    )
  );
}

src/actions/posts.js #

export const getPosts = () => async(dispatch) =>{
    try {
        const  {data}  = await api.fetchPost()
        console.log([data]);
        dispatch({type:'FETCH_ALL', payload:[data]})
    } catch (error) {
        console.log(error.message)
    }
}

src/reducers/posts.js #

export default (posts = [], action) => {
    switch (action.type) {
        case 'FETCH_ALL':
            return action.payload;
        case 'CREATE':
            return [...posts, action.payload];
    
        default:
            return posts;
    }
}

解决方法 #

1. 修正API数据传递格式 #

你的api.fetchPost()返回的data大概率已经是数组，但你在action里额外套了一层[data]，导致state中的posts变成了数组嵌套数组的结构。当Post组件接收post属性时，拿到的是整个数组而非单条post对象，进而引发内部的map错误。

修改src/actions/posts.js，直接传递原始的data：

export const getPosts = () => async(dispatch) =>{
    try {
        const  {data}  = await api.fetchPost()
        // 去掉[data]，直接使用返回的数组数据
        dispatch({type:'FETCH_ALL', payload: data})
    } catch (error) {
        console.log(error.message)
    }
}

2. 完善Posts组件的空值校验 #

虽然你用了posts?.map，但在判断!posts.length时，如果posts是undefined或null，posts.length会直接报错。先确保posts是有效数组再做判断：

const Posts =  () => {
  const posts =  useSelector((state)=>(state.posts))
  const classes = useStyles()
  
  // 先校验posts是否存在且为数组
  if (!posts || !Array.isArray(posts)) {
    return <CircularProgress />
  }

  return (
    !posts.length ? <CircularProgress /> : (
      <Grid className={classes.container} container alignItems="stretch" spacing={3}>
        {posts.map((post) => (
          <Grid key={post._id} item xs={12} sm={6} md={6}>
            <Post post={post}  />
          </Grid>
        ))}
      </Grid>
    )
  );
}

3. 检查Post组件内部逻辑 #

错误栈明确指向Post.jsx第22行的map操作，说明Post组件内部在对某个undefined值执行map。检查Post组件代码，确保接收的post属性是完整对象，内部用到的数组类型属性（比如评论、标签等）都做了空值判断或初始化。

内容的提问来源于stack exchange，提问作者Sarthak Dubey