时间戳

首页 > 解决方案 > 为什么即使状态/依赖项发生了变化，应用程序也不会重新渲染

reactjs - 为什么即使状态/依赖项发生了变化，应用程序也不会重新渲染

问题描述

我正在改变网格如下

const clearPath = () => {
    grid.map((row) => {
      row.map((node) => {
        if (node.isVisited) {
          //console.log(node);
          node.isVisited = false;
        }
      });
    });
    setGrid(grid);
    console.log(grid);
  };

并将其渲染如下


return (
      <div className="arena">
        {grid.map((row, i) => (
          <div key={i} className="row">
            {row.map((node, j) => {
              const { row, col, isStart, isEnd, isWall, isVisited } = node;

              return (
                <Node
                  key={j}
                  col={col}
                  row={row}
                  node={node}
                  isEnd={isEnd}
                  isStart={isStart}
                  isWall={isWall}
                  isVisited={isVisited}
                  mouseIsPressed={mouseIsPressed}
                  onMouseDown={(row, col) => {
                    handleMouseDown(row, col);
                  }}
                  onMouseEnter={(row, col) => {
                    handleMouseEnter(row, col);
                  }}
                  onMouseUp={() => handleMouseUp()}
                ></Node>
              );
            })}
          </div>
        ))}
      </div>
    );

但是当我调用 clearPath 函数时，网格正在更新但应用程序没有重新渲染？为什么会这样？

标签： reactjsreact-state-management

解决方案

您正在改变旧数组而不是创建新数组。由于它们是引用相等的，因此反应从渲染中退出。由于数组是数组数组，因此您还需要映射它们，并复制更改的节点。

const clearPath = () => {
  const newGrid = grid.map((row) => {
    return row.map((node) => {
      if (node.isVisited) {
        return { ...node, isVisited: false };
      }
      return node;
    });
  });

  setGrid(newGrid);
};

推荐阅读