未处理的拒绝（TypeError）：无法读取未定义的属性答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read property of undefined未处理的拒绝（TypeError）：无法读取未定义的属性
【发布时间】：2019-04-07 22:38:14
【问题描述】：

我不知道为什么我无法获取数据，而我可以通过 console.log() 访问它！

export class InnerTicket extends React.Component{
constructor(props){
    super(props);
    this.state = {
        ticket: ''
    }
}

componentDidMount() {
    this.getTicket().then(result => this.setState({
        ticket: result
    }))
}

getTicket(){
    const slug = this.props.match.params.id;
    return this.props.TicketsStore.loadTicket(slug);
}
render(){
    console.log(this.state);

当我运行它时一切正常，我可以通过控制台查看数据：

{ticket: {…}}ticket: {success: true, data: {…}, error: "", message: ""}data: {result: "success", ticketid: 22, tid: "168552", c: "WHgCsCBO", deptid: 5, …}error: ""message: ""success: true__proto__: Object__proto__: Object

但是当我想在视图中显示我的数据时：

render(){
    return( <span className="label label-warning">
                            {this.state.ticket.data.status}
                        </span>)

我收到此错误：TypeError: Cannot read property 'status' of undefined

【问题讨论】：

render(){ return( <span className="label label-warning"> {this.state.ticket.data ? this.state.ticket.data.status : null} </span>)怎么样
@ingvar 出现同样的错误...
哎呀。 {this.state.ticket ? this.state.ticket.data.status : null} 应该可以工作

标签： javascript reactjs

【解决方案1】：

您的状态已初始化为：

this.state = {
    ticket: ''
}

所以在第一次渲染时，this.state.ticket 是一个空字符串，并且 this.state.ticket.data 是未定义的。稍后您才将 state.ticket 更新为对象。

要解决这个问题，要么使初始状态与你的渲染方法一起工作，要么让你的渲染方法检查空字符串的可能性。

【讨论】：

如何让我的渲染方法检查空字符串的可能性？
例如，如果你不想渲染：if (this.state.ticket === '') { return null }

【解决方案2】：

我不确定它是否完美，但应该可以正常工作：

render(){
    return( <span className="label label-warning">
                            {this.state.ticket.data.status ? this.state.ticket.data.status : null}
                        </span>)

【讨论】：

不，结果是一样的：Cannot read property 'status' of undefined
{this.state.ticket 怎么样？ this.state.ticket.data.status : null}