React JS中如何在return函数内返回两个Map的值？

嘿，我来帮你解决这个问题！首先要明确：在React的return语句里，你不能直接返回多个独立元素，必须用一个容器把它们包裹起来——比如<div>，或者更推荐的<React.Fragment>（短写法是<>），这样不会在DOM里生成多余的节点。

结合你给出的嵌套JSON数据结构（外层是包含评论的数组，每个评论的answer又是包含回复的数组），我们可以通过两层map遍历来渲染所有评论和对应的回复。先理清楚你的数据结构：

• 最外层数组：每一项是一个只包含单个评论对象的子数组
• 每个评论对象的answer属性：每一项也是一个只包含单个回复对象的子数组

接下来直接上可运行的代码示例，你可以直接参考：

import React from 'react';

const CommentList = () => {
  // 你的JSON数据（补全了缺失的部分方便演示）
  const commentData = [
    [
      {
        "id": "12687",
        "user": ".",
        "comment": "همه چیز خیلی خوب بود.",
        "isadmin": false,
        "answer": [
          [
            {
              "id": "12692",
              "user": "admin",
              "comment": "سلام دوست عزیز. با تشکر از نظر شما",
              "isadmin": true,
              "answer": []
            }
          ],
          [
            {
              "id": "12724",
              "user": ".",
              "comment": "تشکر",
              "isadmin": false,
              "answer": []
            }
          ]
        ]
      }
    ],
    [
      {
        "id": "12688",
        "user": "fatehi",
        "comment": "طعم برگر ها بسیار متفاوت و خوشمزه بود، واقعآ لذت بردم.",
        "isadmin": false,
        "answer": [
          [
            {
              "id": "12691",
              "user": "admin",
              "comment": "خیلی خوشحال شدیم که لذت بردید 😊",
              "isadmin": true,
              "answer": []
            }
          ]
        ]
      }
    ]
  ];

  // 可选：先扁平化数据，让结构更直观（避免每次map都取[0]）
  const flattenedComments = commentData.map(commentGroup => commentGroup[0]);

  return (
    <> {/* 用Fragment作为最外层容器，无多余DOM节点 */}
      {flattenedComments.map(comment => (
        <div key={comment.id} style={{ margin: '1rem 0', padding: '0.5rem', border: '1px solid #eee' }}>
          {/* 渲染主评论 */}
          <div style={{ marginBottom: '0.5rem' }}>
            <strong>{comment.user}</strong>: {comment.comment}
            {comment.isadmin && <span style={{ marginLeft: '0.5rem', color: '#2196f3' }}>管理员</span>}
          </div>
          {/* 渲染回复列表 */}
          <div style={{ marginLeft: '2rem' }}>
            {comment.answer.map(replyGroup => {
              const reply = replyGroup[0];
              return (
                <div key={reply.id} style={{ margin: '0.3rem 0', padding: '0.3rem', backgroundColor: '#f5f5f5' }}>
                  <strong>{reply.user}</strong>: {reply.comment}
                  {reply.isadmin && <span style={{ marginLeft: '0.5rem', color: '#2196f3' }}>管理员</span>}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </>
  );
};

export default CommentList;

关键要点说明： #

• 容器包裹：用<>（Fragment）作为最外层，避免生成多余的DOM元素；
• 列表key：每个map生成的元素都要加唯一的key（这里用数据里的id，比用index更稳定，避免重渲染问题）；
• 数据扁平化：我加了一步flattenedComments的处理，把嵌套的单元素数组拆成直接的评论对象数组，让渲染代码更简洁；
• 样式区分：用内联样式简单区分了评论和回复的层级，你可以换成自己的CSS类名。

如果后端返回的嵌套单元素数组是不必要的，也可以在组件初始化时先处理好数据，再进行渲染，这样代码可读性会更高。

内容的提问来源于stack exchange，提问作者S.M_Emamian