React数组状态更新后为何未触发重新渲染？

问题说明 #

学习React时遇到如下情况：尝试从shapes状态数组渲染三个图形，点击按钮通过setShapes修改整个数组，控制台显示shapes状态已成功更新，但页面上的图形并未随之变化。已知数组突变不会触发重渲染，但此处是通过setShapes设置新状态，疑惑为何React未检测到变化并触发重渲染。

代码示例 #

import { useState } from "react";

export default function MyApp() {
  const initialShapes = [
    { name: "circle", x: 50, y: 10, id: 1 },
    { name: "square", x: 100, y: 10, id: 2 },
    { name: "circle", x: 150, y: 10, id: 3 },
  ];
  const [shapes, setShapes] = useState(initialShapes);
  console.log(shapes);
  return (
    <>
      <button
        onClick={() => {
          setShapes([{ name: "square", x: 20, y: 70, id: 2 }]);
        }}
      >
        Just show one shape
      </button>
      {initialShapes.map((shape) => {
        return (
          <div
            key={shape.id}
            style={
              shape.name === "circle"
                ? {
                    position: "absolute",
                    backgroundColor: "red",
                    width: "30px",
                    height: "30px",
                    borderRadius: "50px",
                    translate: `${shape.x}px ${shape.y}px`,
                  }
                : {
                    position: "absolute",
                    backgroundColor: "red",
                    width: "30px",
                    height: "30px",
                    translate: `${shape.x}px ${shape.y}px`,
                  }
            }
          ></div>
        );
      })}
    </>
  );
}

控制台输出 #

初始状态 #

[
    {
        "name": "circle",
        "x": 50,
        "y": 10,
        "id": 1
    },
    {
        "name": "square",
        "x": 100,
        "y": 10,
        "id": 2
    },
    {
        "name": "circle",
        "x": 150,
        "y": 10,
        "id": 3
    }
]

点击按钮后状态 #

[
    {
        "name": "square",
        "x": 20,
        "y": 70,
        "id": 2
    }
]

问题原因 #

核心问题在于渲染时遍历的是静态常量initialShapes，而非状态变量shapes。initialShapes是组件内部定义的固定数组，每次组件渲染它都不会改变，所以即使通过setShapes更新了shapes状态，页面依然只会渲染initialShapes里的内容，不会响应状态变化。

解决方案 #

将渲染部分的initialShapes.map替换为shapes.map，让页面渲染依赖状态变量shapes：

// 替换原渲染代码中的map部分
{shapes.map((shape) => {
  return (
    <div
      key={shape.id}
      style={
        shape.name === "circle"
          ? {
              position: "absolute",
              backgroundColor: "red",
              width: "30px",
              height: "30px",
              borderRadius: "50px",
              translate: `${shape.x}px ${shape.y}px`,
            }
          : {
              position: "absolute",
              backgroundColor: "red",
              width: "30px",
              height: "30px",
              translate: `${shape.x}px ${shape.y}px`,
            }
      }
    ></div>
  );
})}

这样当shapes状态更新时，React会检测到状态变化并触发重渲染，页面上的图形就会同步更新。

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