使用useState的setState时数据未更新的问题排查

你的问题核心是直接修改了React state的原始引用，导致React无法检测到状态变化，因此不会触发组件重渲染。

问题代码分析 #

你当前的写法：

const [roomNumber, setRoomNumber] = React.useState([]);
setRoomNumber((prev) => {
  const next = prev; // 仅复制原数组引用，未创建新数组
  next.push(''); // 直接修改原state数组
  return next; // 返回的仍是同一个引用
});

React的状态更新依赖引用变化判断是否需要更新组件。由于你始终返回同一个数组引用，React会判定状态未发生改变，因此不会触发重渲染，useEffect也不会执行。

正确写法 #

必须创建新的数组引用，让React检测到状态变化，常见两种实现方式：

1. 扩展运算符生成新数组：

setRoomNumber((prev) => [...prev, '']);

2. slice()拷贝原数组后修改：

setRoomNumber((prev) => {
  const next = prev.slice(); // 创建原数组的浅拷贝
  next.push('');
  return next;
});

为什么保存代码后内容会一次性显示？ #

VS Code保存代码时，Vite的热更新（HMR）会重新挂载组件。此时组件初始化会读取被你直接修改过的原数组（引用类型state在组件卸载前会保留修改后的内容），所以所有push的内容会一次性渲染出来，但这属于热更新的特殊场景，并非正常的状态更新流程。

关于版本的疑问 #

你的React（18.2.0）和Vite（5.1.0）版本均无问题，useState核心机制也未变更——永远不要直接修改state原始值，必须返回新的引用或值，这是React状态管理的基本原则。

你的依赖配置 #

"dependencies": {
  "@ant-design/icons": "^5.3.7",
  "@reduxjs/toolkit": "^2.2.1",
  "antd": "^5.18.3",
  "less": "^4.2.0",
  "less-loader": "^12.2.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^9.1.0",
  "react-router-dom": "^6.22.2",
  "redux-persist": "^6.0.0"
},
"devDependencies": {
  "@types/react": "^18.2.55",
  "@types/react-dom": "^18.2.19",
  "@typescript-eslint/eslint-plugin": "^6.21.0",
  "@typescript-eslint/parser": "^6.21.0",
  "@vitejs/plugin-legacy": "^5.3.0",
  "@vitejs/plugin-react": "^4.2.1",
  "electron": "^29.0.0",
  "electron-builder": "^24.12.0",
  "eslint": "^8.56.0",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.5",
  "typescript": "^5.2.2",
  "vite": "^5.1.0"
}

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