无法使用TypeScript在具有React类组件的antd中添加行

cld4siwp  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(119)

我正在使用一个tsx文件添加数据到antd表,但无法添加行到它,当我点击按钮有事件:“handleAddTicket”。但当我改了行:const tickets: TicketLine[] = ticketLines;const tickets: TicketLine[] = [];,行成功添加到表中,它不是数组,而是最新的元素。我不知道为什么它不工作,虽然当我记录ticketLines变量时,它显示正确的数组。

import * as React from 'react';
import './index.less';

import { Button, Card, Col, Dropdown, Menu, Row, Table } from 'antd';
import { inject, observer } from 'mobx-react';
import OrderStore from '../../stores/orderStore';
import Stores from '../../stores/storeIdentifier';
import AppComponentBase from '../../components/AppComponentBase';

export interface IOrderProps {
  orderStore: OrderStore;
}

export interface IOrderState {
  ticketLines: TicketLine[];
}

export interface TicketLine {
  key: number,
  policyObject: any,
  ticketType: string,
  ticketAmount: 1,
  region: any,
  areaWindowTimeId: 0,
  ticketComboPrice: number,
  actionDelete: boolean  
}

@inject(Stores.OrderStore)
@observer
class Order extends AppComponentBase<IOrderProps, IOrderState> {
  async componentDidMount() {
    await this.getAll();
  }

  async getAll() {
    await this.props.orderStore.initialize();
  }

  constructor(props:IOrderProps) {
    super(props);
    this.state = {
      ticketLines: []
    };
  }

public render() {
  const { ticketComboOutput, policyObjectOutput } = this.props.orderStore;
  const {ticketLines} = this.state;

  const tickets: TicketLine[] = ticketLines;
  const handleAddTicket = (item:any, menu:any) => {
    const ticket: TicketLine = {
    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    
    }
    tickets.push(ticket);
    // console.log(tickets);
    this.setState({ticketLines: tickets});
  };
  console.log(ticketLines);
  
  var items = policyObjectOutput.map(p =>
      <Menu.Item key={p.id}>
        <p>{p.name} - Giảm {p.policyObjectDiscount.discountPercent * 100}%</p>
      </Menu.Item>
    );
    const menu = (
      <Menu>{items}</Menu>
    );
    const columns = [
      {
        title: 'Đối tượng miễn giảm',
        dataIndex: 'policyObject',
        key: 'policyObject',
      },
      {
        title: 'Loại vé',
        dataIndex: 'ticketType',
        key: 'ticketType',
      },
      {
        title: 'Số lượng',
        dataIndex: 'ticketAmount',
        key: 'ticketAmount',
      },
      {
        title: 'Khu vực',
        dataIndex: 'region',
        key: 'region',
      },
      {
        title: 'Khung giờ',
        dataIndex: 'areaWindowTimeId',
        key: 'areaWindowTimeId',  
      },
      {
        title: 'Thành tiền',
        dataIndex: 'ticketComboPrice',
        key: 'ticketComboPrice'
      },
      {
        title: 'Xóa',
        dataIndex: 'actionDelete',
        key: 'actionDelete'
      } 
    ];

    return (
      <>
        <Row gutter={16}>
          {ticketComboOutput.map(
            item =>
              <Card className='ticketCombo' key={item.id} title={item.name} style={{ width: 300 }}>
                <p>Thông tin: {item.description}</p>
                <p>Giá vé: {item.ticketComboPrice.price}</p>
                <Row style={{'display': 'flex', 'justifyContent':'space-between'}}>
                  <Col>Khu vực:</Col>
                  <Col>
                    <ul> {
                      item.areas.map(a => <li key={a.id}>{a.name}</li>)
                    }</ul>
                  </Col>
                </Row>
                <Row style={{'display': 'flex', 'justifyContent':'space-between'}}>
                  <Col>
                    <Dropdown overlay={menu}>
                      <a>Đối tượng</a>
                    </Dropdown>
                  </Col>
                  <Col>
                    <Button 
                    onClick={()=> handleAddTicket(item, menu)}
                    title="Chọn">Chọn</Button>
                  </Col>
                </Row>
              </Card>
          )}
        </Row>
        <Table dataSource={ticketLines} columns= {columns}/>              
      </>
    )

  }
}
export default Order;
zour9fqk

zour9fqk1#

由于您在render方法中定义了handleAddTicket,因此它在旧版本的tickets上有一个闭包,所以每次调用它时,它都是在您的tickets的上一个render版本之上构建的。
handleAddTicket这样的事件处理程序通常是组件类中的一个独立方法,它不应该通过闭包访问tickets,而应该只访问state中的ticketLines。
更新类组件中的状态时有一个警告。请参见https://reactjs.org/docs/faq-state.html
所以我会这样做:

private handleAddTicket (item:any, menu:any) {
    const ticket: TicketLine = {
      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    
    }

    this.setState(state => {
      return {
        ...state,
        ticketLines: [
          ...state.ticketLines,
          ticket
        ]
      };
    });
  }

相关问题