React开发中map方法仅遍历JSON第一个对象而非全部的问题排查

核心问题（导致仅渲染第一个对象） #

• 1. key属性使用错误：你在map循环时用数组下标i作为key，而你的三个feed对象内容高度相似，React的Diff算法会误判三个元素为同一个节点，仅保留渲染第一个。你JSON里每个对象都自带唯一的key字段，替换为这个字段即可：

{this.state.feedInfo.map((feedInfo, i) => {
  return (
    <div className="article" key={feedInfo.key}>
    {/* 其余内容保持不变 */}
  )
})}

• 2. 重复ID导致HTML渲染异常：HTML规定ID属性全局唯一，你在循环内写死了id="feed-pic"、id="space"，浏览器解析到重复ID时会自动忽略后续同ID元素，导致后面的feed不显示。把重复ID改为动态值或者直接删除即可：

// 示例：修改图片ID为动态值
<img id={`feed-pic-${feedInfo.key}`} src={feedInfo.feedImg} />
// a标签ID同理修改
<a id={`space-${feedInfo.key}`} href="">expanding</a>

其他潜在问题 #

• 1. 你在addComment方法中调用了this.state.commentList.concat，但constructor的初始state里没有声明commentList，首次调用时会因为commentList为undefined抛出JS错误，可能阻塞后续渲染，需要在state中补充初始化：

constructor() {
  super();
  this.state = {
    value: '',
    feedInfo: [],
    commentList: [] // 新增初始化项
  };
}

• 2. 目前所有feed项的评论输入框绑定的是同一个this.state.value，修改任意一个输入框所有feed的输入内容都会同步变化，后续可以考虑把单个feed的评论状态封装到单独组件中，或者将评论数据和对应feed绑定维护。

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