React，TSX 解析错误：预期表达式答案

【问题标题】：React, TSX Parsing error: Expression expectedReact，TSX 解析错误：预期表达式
【发布时间】：2020-07-11 22:44:30
【问题描述】：

下面是详细页面的 REACT 代码

票是一个主要对象，我想做的是在下载时将票名添加为 .pdf 文件名。

所以我需要一个解决方案来将具体的票证名称传递给 handleDownload 函数

在渲染部分声明ticket.ticketName等没有问题。但是使用onClick会出现问题。

type TicketProps =
    TicketStore.TicketState &
    typeof TicketStore.actionCreators & 
    RouteComponentProps<{ticketId: string}>;

class Ticket extends React.PureComponent<TicketProps> {

    public componentDidMount() {
        this.ensureDataFetched();
    }    

    private ensureDataFetched(){
        this.props.requestTicket(+this.props.match.params.ticketId);
    }

    handleDownload = () =>{
        Axios.get(`${apiUrl}/api/tickets/download/${this.props.match.params.ticketId}`,{responseType: 'arraybuffer',
            headers: { "Content-Type": 'application/pdf' }
          }).then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', "test"+.pdf");
            document.body.appendChild(link);
            link.click();
        });
    }

    public render() {
        let ticket = this.props.ticket;
        if(this.props.isLoading){
            return <span>Laen andmeid...</span>;
        }
        if (ticket === undefined) {
            return <h1>Piletit ei leitud</h1>;
        }
        let name = ticket.ticketName
        return (
            <React.Fragment>
                <h3>Üritus: {ticket.ticketName}</h3>
                <Table striped hover size="sm">
                    <tbody>
                        <tr>
                            <td className="details">Asukoht:</td>
                            <td>{ticket.eventLocation}</td>
                        </tr>
                        <tr>
                            <td className="details">Kuupäev:</td>
                            <td>{ticket.eventDate}</td>
                        </tr>
                        <tr>
                            <td className="details">Lisainfo:</td>
                            <td>{ticket.extraInfo}</td>
                        </tr>
                        <tr>
                            <td className="details">Pilet:</td>
                            <td>{ticket.pdfTicket}</td>
                        </tr>
                    </tbody>
                </Table>
                <Button onClick={this.handleDownload}>Lae alla</Button>
                <Popup trigger={<button className="btn btn-primary">Show location on map</button>} position="bottom left">
                <div><Maps aadress={ticket.eventLocation}></Maps>></div>
                </Popup>
                <Link to='../tickets'>
                    <Button color='primary' onClick={()=>{}}>
                        Tagasi
                    </Button>
                </Link>
                <br></br>
            </React.Fragment>
        );
    }
}

export default connect(
    (state: ApplicationState) => state.ticket,
    TicketStore.actionCreators
    )(Ticket as any);

我收到票后解析错误？

有什么想法吗？谢谢

【问题讨论】：

标签： tsx react-tsx

【解决方案1】：

使用以下不带问号的代码：

<Button onClick={()=>{this.handleDownload(ticket.id,ticket.ticketName)}}>Lae alla</Button>

【讨论】：

不能 -> 那么我有'对象可能是'未定义'。
你为什么使用问题掩码？
当你的对象未定义时，react 会告诉你。
?标记我编写代码时生成的位置。 React 确实告诉我，但我无法弄清楚表达式部分的方法
你能告诉我票是什么或它的价值来自哪里吗？

【解决方案2】：

解决方案是添加

  if(this.props.ticket===undefined){
        return //something;
    }

在使用对象之前。

【讨论】：