React类组件+TypeScript下Antd表格无法添加行的问题

核心原因：React状态更新的不可变性规则 #

React组件重渲染的前提是状态引用发生变化。你最开始的代码犯了一个典型错误：

const tickets: TicketLine[] = ticketLines; // 直接指向state里的原数组
tickets.push(ticket); // 修改原数组内容，但数组本身的引用没改
this.setState({ticketLines: tickets}); // 传递同一个引用，React认为状态没变化，不更新表格

因为tickets和state.ticketLines是同一个数组对象，哪怕你往里面加了元素，React对比前后状态时发现引用一致，就不会触发表格重渲染，所以你看不到新行。

改成const tickets: TicketLine[] = [];后，每次都是新建空数组，再push当前元素——这时候数组引用变了，React会更新表格，但因为每次都丢了之前的元素，所以只能看到最新的一行。

正确的写法：创建新数组保留原有数据 #

必须生成新的数组实例，同时包含旧数据和新元素，让React能检测到状态变化。推荐用扩展运算符：

// 把handleAddTicket移到类方法里，避免每次render创建新函数
handleAddTicket = (item:any, menu:any) => {
  const { policyObjectOutput } = this.props.orderStore;
  const newTicket: TicketLine = {
    key: Date.now(), // 用时间戳做唯一key，防止item.id重复导致表格渲染异常
    policyObject: policyObjectOutput[0].name,
    ticketType: item.description,
    ticketAmount: 1,
    region: item.areas[0].name,
    areaWindowTimeId: 0,
    ticketComboPrice: item.ticketComboPrice.price,
    actionDelete: true    
  };
  // 用prevState获取最新状态，避免异步更新的问题
  this.setState(prevState => ({
    ticketLines: [...prevState.ticketLines, newTicket]
  }));
};

也可以用concat方法实现同样效果：

this.setState(prevState => ({
  ticketLines: prevState.ticketLines.concat(newTicket)
}));

关于console.log显示正确的问题 #

你修改的是原数组的内容，所以控制台打印能看到最新数据，但React不监听数组内部元素的变化，只认状态的引用是否改变——只有当你传递新的数组引用时，才会触发表格重渲染，把最新数据展示出来。

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