为什么即使状态已更改，应用程序也不会重新呈现？

Question

我正在更新状态数组如下

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

    setGrid(newGrid);
    //console.log(grid);
  };

将其渲染为

return (
<div>
<div>
    <button className="btn" onClick={() => clearPath()}>
    <span>Clear</span>
    </button>
</div>
<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>
</div>
);

使用 clearpath 函数我可以修改状态，但应用程序不会重新呈现。为什么会这样？只有在状态改变时才会重新渲染，对吗？

Answer 1

您正在使用 node.isVisited = false; 改变状态如果 Node 是一个纯组件，它将导致 none 的 Node 组件被重新渲染。

return row.map((node) => {
  if (node.isVisited) {
    return {...node, isVisited : false,previousNode : null};
  }
  return node;
});

为什么即使状态已更改，应用程序也不会重新呈现？

Why is the app not re-rendering even if the state has changed?

reactjs

react-state-management