Así que estoy increíblemente confundido, básicamente el mosaico debería volverse gris cuando hago clic en él, pero no es así. Estoy bastante seguro de que hice esto correctamente a menos que haya algo que me estoy perdiendo en la forma en que configuré el tipo en primer lugar. Lo que es aún más extraño es que, a veces, cuando voy a cambiar manualmente el estado a través de la extensión, de repente (solo para el único mosaico para el que cambié manualmente el estado), onClick funciona perfectamente. ¡Cualquier ayuda se agradece, gracias!

 import React, { useEffect, useState } from 'react'; import produce from 'immer'; import { Node } from './astar'; export default function Grid(): JSX.Element { const [grid, setGrid] = useState<Node[][]>([]); const numCols = 50; useEffect(() => { let tempGrid: Node[][] = []; for (let i = 0; i < numCols; i++) { tempGrid.push([]); } for (let i = 0; i < tempGrid.length; i++) { for (let j = 0; j < tempGrid.length / 2; j++) { let node = new Node(i, j, false); tempGrid[i][j] = node; } } setGrid(tempGrid); }, []); return ( <div style={{ display: 'grid', gridTemplateColumns: `repeat(${numCols}, 20px)` }}> {grid.map((rows, i) => { return ( <div key={i}> {rows.map((cols, j) => { return ( <div key={j} onClick={() => { const newGrid = produce(grid, (tempGrid) => { tempGrid[i][j].isWall = !tempGrid[i][j].isWall; }); setGrid(newGrid); console.log(grid[i][j]); }} style={{ width: '20px', height: '20px', border: '1px solid black', backgroundColor: grid[i][j].isWall ? '#A9A9A9' : '#FFFFFF' }} ></div> ); })} </div> ); })} </div> ); }

La clase de nodo

 class Node { x: number; y: number; isWall: boolean; constructor(x: number, y: number, isWall: boolean) { this.x = x; this.y = y; this.isWall = isWall; } } export { Node };

incluso cuando hago clic en él todavía no cambia el estado.