React开发国际象棋游戏：无法获取squares数组ver属性问题

核心问题 #

1. squares是二维数组，并非单个对象：通过两次map生成的squares是[[{},{}...], [{},{}...]]的二维结构，直接访问squares.ver会返回undefined——数组本身没有该属性。
2. switch语句用法完全错误：case分支里写的是赋值操作（squares.ver = "a"）而非判断条件；且switch的表达式是整个squares数组，和case里的字符串值完全无法匹配，必然走到default分支。
3. 需求实现方向偏差：要输出每个棋格的ver属性，需要遍历数组中的每个对象，而非用switch判断整个数组。

修正代码示例 #

方式1：单独遍历输出

替换原switch代码块：

// 遍历二维数组，逐个输出每个棋格的ver属性
squares.forEach(row => {
  row.forEach(square => {
    console.log(square.ver);
  });
});

方式2：渲染时同步输出

在组件渲染的map循环中添加输出逻辑：

return (
  <div className='App'>
    {squares.map((square) => (
      square.map((innerSquare) => {
        console.log(innerSquare.ver); // 输出当前棋格的ver属性
        return <div className='square' id={innerSquare.id} key={innerSquare.id} ver={innerSquare.ver} hor={innerSquare.hor}>{innerSquare.id}</div>
      })
    ))}
  </div>
);

关键说明 #

• 二维数组需要两层遍历才能访问到单个棋格对象，直接操作外层数组无法获取对象属性。
• switch仅适用于单个值的分支判断，不适合遍历数组处理批量数据的场景。

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