React使用fetch和componentDidMount请求数据未渲染展示问题求助

问题排查及修复方案 #

• Props命名不匹配
  Feed组件调用Comment组件时，传入的属性名为commentAddList，但Comment组件内部渲染时读取的属性是this.props.commentList，两边命名不一致导致无法拿到传入的评论数据。
  修复：将Feed.js中调用Comment的代码改为：

<Comment commentList={this.state.commentList} />

• 新增评论数据结构不匹配
  Comment组件渲染时要求每条评论是包含userName（用户名）和content（评论内容）字段的对象，但你编写的addComment方法直接把输入框的字符串内容拼进了评论数组，字符串没有对应字段自然无法渲染。
  修复：修改Feed.js的addComment方法，构造符合要求的评论对象：

addComment = () => {
  const inputVal = this.state.value.trim()
  if (!inputVal) return // 空评论不提交
  this.setState({
    // 此处userName可替换为你实际的当前登录用户名
    commentList: this.state.commentList.concat([{userName: '我', content: inputVal}]),
    value: '',
  });
};

• 补充请求错误捕获（可选但建议）
  当前fetch请求没有错误捕获逻辑，如果接口跨域、404或者返回格式错误你无法第一时间定位问题，建议给fetch补充catch逻辑：

componentDidMount() {
  fetch('http://localhost:3000/data/commentData.json', {
    method: 'GET',
  })
    .then(res => res.json())
    .then(data => {
      this.setState({
        commentList: data,
      });
    })
    .catch(err => console.error('评论数据请求失败：', err))
}

如果修改后仍然无法渲染，可打开浏览器控制台的Network面板，查看commentData.json的请求是否成功，返回的每条数据是否确实存在userName和content字段，避免字段名拼写错误（比如小写username、comment等）导致取值失败。

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