React评论区报错：Cannot read properties of undefined (reading 'data')

核心原因 #

报错直接原因是你调用map的response.data.results.data.message不是数组（可能是null、undefined或单个对象），导致无法执行数组方法map。

具体解决步骤 #

1. 确认后端返回的数据结构
   在请求的then回调里先打印完整返回数据，明确实际的层级和message字段的类型：

axios.get(process.env.REACT_APP_API_URL +"product/" + this.product_id +"/idea/"+ this.idea_id +"/comment",{ 
    headers: {
      Authorization: "Bearer "+ user_access_token,
    }})
.then(response => {
  console.log('后端返回完整数据:', response.data); // 打印确认结构
  // 后续逻辑
});

2. 添加安全判断，避免直接调用map
   修改message_list的赋值逻辑，先校验字段存在性和数组类型，防止报错：

const message_list = Array.isArray(response.data?.results?.data?.message) 
  ? response.data.results.data.message.map(value => value) 
  : []; // 非数组情况赋值为空数组，保证后续拼接正常

这里的?.是可选链操作符，能防止某一层级字段不存在时抛出Cannot read property 'xxx' of undefined的错误。

3. 匹配组件要求的数据格式
   检查message数组里的每个对象是否符合CommentSection组件所需的字段（比如id、content、userId等），如果后端返回字段名不一致，需要在map里转换：

const message_list = Array.isArray(response.data?.results?.data?.message) 
  ? response.data.results.data.message.map(item => ({
      id: item.comment_id,
      content: item.content,
      userId: item.user_id,
      userImg: item.avatar || 'https://ui-avatars.com/api/name='+item.user_name+'&background=random',
      userFullName: item.user_name,
      replies: item.replies || []
    })) 
  : [];

4. 初始化state为数组
   确保组件的data状态初始值是空数组，避免拼接时出错：

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

内容的提问来源于stack exchange，提问作者Ahmed Nizami