React组件更新问题：数组添加元素后前端未渲染新列

核心原因 #

你的代码直接用let声明数组，修改数组的方式未触发前端框架的响应式更新，或者渲染逻辑未绑定数组的实时状态，导致视图不更新。具体分几种情况：

1. 未使用框架的响应式状态管理 #

如果是Vue/React这类现代前端框架，普通let变量的变更不会触发组件重渲染。框架要求通过它提供的API管理状态，状态变化时才会自动更新视图。

2. 数组变更不符合框架更新规则 #

• React：状态是不可变的，直接修改原数组（比如push）不会触发重渲染，必须替换数组引用。
• 部分场景下（比如Vue2中数组被冻结、或使用非响应式数组声明），push操作可能没被框架的变更检测机制捕获。

3. 渲染逻辑未绑定实时数组 #

如果前端渲染列的代码基于数组初始值的拷贝（比如渲染时把columnChooser赋值给另一个局部变量且未监听变化），就算原数组更新，渲染逻辑也不会同步。

4. productPrice本身无效 #

如果productPrice是undefined、或格式不符合列配置要求（比如缺少key、title这类必填字段），就算数组添加了该元素，前端也不会渲染对应的列。

对应解决方案 #

针对Vue项目 #

用ref或reactive声明响应式数组：

// 用ref声明响应式数组
const columnChooser = ref([productName])

function replacer(key: any) {
  if (key == 1) {
    message.info(`Click on item ${key}`);
    // 修改ref包裹的数组时要访问.value
    columnChooser.value.push(productPrice)
  }
}

针对React项目 #

通过useState管理状态，更新时替换数组引用：

import { useState } from 'react';

const [columnChooser, setColumnChooser] = useState([productName])

function replacer(key: any) {
  if (key == 1) {
    message.info(`Click on item ${key}`);
    // 生成新数组，触发重渲染
    setColumnChooser([...columnChooser, productPrice])
    // 也可以用concat：setColumnChooser(columnChooser.concat(productPrice))
  }
}

通用排查步骤 #

1. 调用replacer后，在控制台执行console.log(columnChooser)，确认数组是否真的添加了productPrice。
2. 检查productPrice的格式是否和productName一致，确保是合法的列配置项。
3. 确认渲染列的代码直接绑定了columnChooser，而非初始值的拷贝。

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