React中为对象每个键生成元素及访问Comment字段问题求助

问题根源 #

1. 仅渲染单个元素：原代码在for循环里直接return，第一次循环就会终止函数，只能生成第一个键对应的元素，剩余键值对无法被处理。
2. Comment字段访问错误：props.object是一个以数字为键、评论数组为值的对象，直接写props.object.Comment是在访问这个大对象本身的Comment属性，而非数组内每个评论对象的Comment字段，自然取不到内容。

修复后的代码 #

function Test(props) {
  // 遍历对象所有键值对，生成对应容器元素
  return Object.entries(props.object).map(([key, commentList]) => {
    const rev = revision + key;
    const id = `rev-${rev.replace('.', '-')}`;
    
    // 遍历每个键对应的评论数组，渲染单条评论
    return (
      <div key={key} id={id} className="rev-container">
        {commentList.map((comment, idx) => (
          <div key={idx} className="comment-item">
            {comment.Comment}
          </div>
        ))}
      </div>
    );
  });
}

const root = ReactDOM.createRoot(document.getElementById('my-comments'));
const element = <Test object={filteredComments} />;
root.render(element);

核心改动说明 #

• 用Object.entries().map()替代for循环：map会完整遍历所有键值对并返回元素数组，不会中途终止，确保所有键对应的容器都能被渲染。
• 正确访问Comment字段：先获取每个键对应的commentList数组，再遍历数组内的评论对象，通过comment.Comment获取评论内容。
• 添加React列表key属性：外层容器用对象的key做唯一标识，内层评论用数组索引idx（若评论有自身唯一ID，建议用ID替代索引），符合React列表渲染规范。

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