使用React.js实现表格动态新增列功能的问题咨询

• 你定义的column是普通JS变量，没有纳入React的响应式状态管理：React只会在状态更新时触发组件重新渲染，直接修改普通变量无法触发重渲染，页面不会更新。
• 即使偶然触发组件重渲染，你在组件函数内直接初始化let column = []，每次重渲染都会将数组重置为空，之前推入的数据会全部丢失。

1. 将column改为useState管理的响应式状态
2. 更新数组时使用状态更新函数，遵循React不可变更新原则
3. 若你需要的是往同一个表格内新增列，而非生成多个独立表格，可参考下方完整修复代码：

import { useState } from 'react';
import './App.css';
import Table from 'react-bootstrap/Table'

function App() {
  // 存储输入的表头文本
  const [header, setHeader] = useState("");
  // 存储新增的列数组，改为响应式状态
  const [columns, setColumns] = useState([]);

  const addHeader = (e) => {
    setHeader(e.target.value)
  }

  const addColumn = () => {
    // 不可变方式更新数组，触发重渲染
    setColumns(prev => [...prev, header])
    // 清空输入框，可根据需求选择是否保留
    setHeader("")
  }

  return (
    <>
      <div>
        <form onSubmit={(e) => e.preventDefault()}>
          <input type="text" value={header} onChange={addHeader} />
        </form>
        <button onClick={addColumn}> Add </button>
      </div>
      <div className="container">
        <Table striped bordered hover responsive variant="light">
          <thead>
            <tr>
              <th> Cavity No. </th>
              <th> Column 1 </th>
              {/* 遍历渲染新增的表头 */}
              {columns.map((colName, idx) => (
                <th key={idx}>{colName}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[1,2,3,4].map((rowIdx) => (
              <tr key={rowIdx}>
                <td> </td>
                <td> </td>
                {/* 每行对应新增空单元格 */}
                {columns.map((_, idx) => (
                  <td key={idx}></td>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </>
  );
}

export default App;

如果你的需求确实是生成多个独立表格，只需要把原来的column替换为useState管理的columns即可，原有map渲染多个Table的逻辑不需要修改。

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