React应用无法渲染3x3矩阵组件？技术排查求助

核心问题分析 #

矩阵无法显示的根本原因是缺少必要的CSS样式——.cell和.row元素默认没有宽高和布局规则，渲染后视觉上不可见。同时原代码未实现「点击最后一个方块后按顺序变橙色」的需求，且状态更新存在浅拷贝导致的潜在问题。

完整修复代码 #

Matrix.js #

import React, { useState } from "react";

const Matrix = () => {
  // 初始化3x3白色矩阵
  const [boxes, setBoxes] = useState(Array(3).fill().map(() => Array(3).fill("white")));
  // 记录方块点击顺序
  const [clickOrder, setClickOrder] = useState([]);

  const handleClick = (row, column) => {
    // 深拷贝矩阵，避免直接修改原状态
    const newBoxes = boxes.map(r => [...r]);
    
    // 仅未变色的方块可点击
    if (newBoxes[row][column] === "white") {
      newBoxes[row][column] = "green";
      setBoxes(newBoxes);
      
      // 记录当前点击位置
      const newClickOrder = [...clickOrder, { row, column }];
      setClickOrder(newClickOrder);
      
      // 点击最后一个方块（右下角）后，按顺序变为橙色
      if (row === 2 && column === 2) {
        newClickOrder.forEach((pos, index) => {
          setTimeout(() => {
            setBoxes(prev => {
              const updated = prev.map(r => [...r]);
              updated[pos.row][pos.column] = "orange";
              return updated;
            });
          }, (index + 1) * 500); // 每个方块间隔500ms变色
        });
      }
    }
  };

  return (
    <div>
      {/* 内嵌样式确保矩阵可见 */}
      <style>
        {`
          .matrix {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin: 20px 0;
          }
          .row {
            display: flex;
            gap: 4px;
          }
          .cell {
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
            cursor: pointer;
            transition: background-color 0.3s ease;
          }
        `}
      </style>
      <h1>Matrix</h1>
      <div className="matrix">
        {boxes.map((row, rowIndex) => (
          <div key={rowIndex} className="row">
            {row.map((color, colIndex) => (
              <div
                key={`${rowIndex}-${colIndex}`} {/* 唯一key避免渲染歧义 */}
                className="cell"
                style={{ backgroundColor: color }}
                onClick={() => handleClick(rowIndex, colIndex)}
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Matrix;

App.js（无需修改） #

import React from "react";
import Matrix from "./Matrix";

function App() {
  return (
    <div className="App">
      <Matrix />
    </div>
  );
}

export default App;

关键修复点 #

1. 添加CSS布局样式：通过.matrix、.row的flex布局实现矩阵排列，给.cell设置固定宽高和边框，确保方块可见。
2. 状态深拷贝：使用map(r => [...r])深拷贝二维数组，确保React能正确检测状态变化。
3. 实现按点击顺序变色：新增clickOrder状态记录点击位置，点击最后一个方块后，通过setTimeout按顺序逐个将方块改为橙色。
4. 唯一key优化：使用${rowIndex}-${colIndex}作为方块的key，避免同列索引重复导致的渲染问题。

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