ReactJS表格数据更新求助：新手无法新增数据至表格

• 核心问题：未用React状态管理表格数据
  你当前用普通变量let row存储表格数据，React不会监听普通变量的变化——哪怕你在setTable里修改了row的值，组件也不会触发重渲染，表格自然不会更新。

• 修复步骤

  1. 将row改为React状态变量：

     // 替换原有的let row = [...]
     const [row, setRow] = useState([{id:1,value1:"jhon",value2:"wills"}]);
     

  2. 修改setTable函数，通过状态更新函数修改表格数据：

     const setTable = () => {
         // 用setRow更新状态，触发组件重渲染
         setRow([
             {
                 id: 1,
                 value1: name,
                 value2: accountable
             },
             {
                 id: 2,
                 value1: name,
                 value2: accountable
             },
             {
                 id: 3,
                 value1: name,
                 value2: accountable
             },
         ]);
     }
     

  3. （可选）如果需求是新增单条数据而非替换整个表格，调整setTable为追加逻辑：

     const setTable = () => {
         // 生成唯一ID，避免DataGrid渲染异常
         const newId = row.length ? Math.max(...row.map(item => item.id)) + 1 : 1;
         setRow(prevRows => [...prevRows, {
             id: newId,
             value1: name,
             value2: accountable
         }]);
     }
     

• 额外注意点

  • DataGrid要求每行id唯一，确保新增数据的id不重复，否则会出现渲染异常。
  • 模态框的「Save Changes」按钮目前仅关闭弹窗，若需持久化数据，可在该按钮的点击事件中添加后端提交逻辑。

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