React中map循环渲染二维数组失败：数据正常但组件不更新

问题根源 #

• 外层map未返回渲染结果：内层map生成了JSX元素，但外层map没有将这些元素返回，React无法识别可渲染内容，导致不显示。
• 误用filter做遍历操作：filter的核心作用是过滤数组并返回新数组，用它来修改二维数组属于功能滥用，应该用forEach执行遍历赋值操作。
• 变量作用域不规范：create2DArray函数内的arr未用let/const声明，会污染全局作用域；组件内的数组变量也应使用const声明，避免意外修改。

修改后的完整代码 #

const Component = () => {
  const seat = [
    "1111x111111111111x1111",
    "1111x111111111111x1111",
    "1111x111111111111x1111",
    "1111x11111111111xx1111"
  ];

  // 自动获取行列数，避免硬编码不匹配
  const row_cnt = seat.length;
  const col_cnt = seat[0]?.length || 0;

  function create2DArray(row, col) {
    // 声明局部变量，避免全局污染
    const arr = new Array(row);
    for (let i = 0; i < row; i++) {
      arr[i] = new Array(col);
    }
    return arr;
  }

  const arr = create2DArray(row_cnt, col_cnt);

  // 用forEach遍历填充二维数组
  seat.forEach((obj, key) => {
    const temp = obj.split('');
    for (let i = 0; i < temp.length; i++) {
      arr[key][i] = temp[i];
    }
  });

  return (
    <div className="seat-container">
      {/* 外层map通过隐式返回传递内层生成的JSX */}
      {arr.map((row, rowIndex) => (
        <div key={rowIndex} className="seat-row">
          {/* 给每个座位添加唯一key，提升React渲染效率 */}
          {row.map((seatItem, colIndex) => (
            <div key={`${rowIndex}-${colIndex}`} className='seat_num'>
              <span>{seatItem}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

关键修改说明 #

1. 替换filter为forEach：forEach专为遍历执行操作设计，无需返回值，适配这里的数组填充场景。
2. 修复外层map返回逻辑：使用箭头函数的隐式返回（括号包裹内容），确保内层map生成的JSX能被React接收并渲染。
3. 规范变量声明：所有变量用const/let声明，避免全局作用域污染，符合React组件的编码规范。
4. 完善key属性：给每行和每个座位添加唯一标识的key，帮助React高效更新DOM，避免渲染警告。
5. 自动计算行列数：从原始seat数组中动态获取行列数，避免硬编码导致的数组长度不匹配问题。

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