使用 immer package 反应 state 不会改变

Question

所以我非常困惑，基本上当我点击它们时瓷砖应该变成灰色，但事实并非如此。 我很确定我这样做是正确的，除非我首先设置类型的方式缺少某些东西。 What's even weirder is sometimes when I go to manually change the state through the extension, all of a sudden (just for the single tile I manually changed the state for), the onClick works perfectly. 任何帮助表示赞赏，谢谢！

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>
  );
}

节点 Class

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 };

即使我点击它仍然不会改变 state。

Answer 1

您的Node class 需要标记为immerable以使其与 Immer 兼容：

import {immerable} from "immer"

class Node {
  [immerable] = true; //Add this line

  x: number;
  y: number;
  isWall: boolean;

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

export { Node };

https://immerjs.github.io/immer/complex-objects