Question

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

2018-11-04

33832

javascript reactjs

我找不到为什么我无法获取数据，尽管我可以通过 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：无法读取未定义的属性“status”

Answer 1

您已将状态初始化为：

this.state = {
    ticket: ''
}

因此，在第一次渲染时，this.state.ticket 是一个空字符串，而 this.state.ticket.data 未定义。只有在稍后您才会将 state.ticket 更新为对象。

要解决此问题，请将初始状态设置为与您的渲染方法兼容的状态，或让您的渲染方法检查是否存在空字符串的可能性。

Answer 2

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

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