Javascript 反应本机：未定义不是对象

可能是个新手问题。。。我从运行到componentDidMount上函数的fetch中获得一个json响应，其中包含一个对象。结果将保存到状态

    data: 
    {
    id: 1,
    name: 'joseph',
    tickets: 
              [
              {id: 334, descripton: 'example1'},
              {id: 768, descripton: 'example2'},
              ],
    }

我需要在render中列出此数组票证

componentDidMount(){
  this.getFetch(...);
}

showTickets(WTickets){
  console.log(WTickets);
  WTickets.map((item)=>{
    return (item.id)
  })
}

render(){
  return(
    <View>
      {this.showTickets(this.state.data.tickets)}
    </View>
  )
}

但第一次返回未定义，生成错误，然后状态更改为正确的结果。提取正在使用async await运行，但仍然首先显示未定义的

console.log显示2个结果：一个未定义，另一个带有结果

---

有什么好心人来帮我吗？

这是因为在开始时，this.state.data.tickets是未定义的，您正在渲染函数中调用它，该函数不会等到this.getFetch完成。所以可以执行条件渲染以检查渲染中是否存在this.state.data.tickets

替换{this.showTicketsthis.state.data.tickets}

使用{this.state.data！==未定义？this.showTicketsthis.state.data.tickets:null}

我们在这里要做的是首先检查this.state.data.tickets是否未定义。当它在开始时未定义时，我们返回null，当它停止未定义时，我们称之为this.showTickets

您甚至可以将this.state.data初始化为空数组，当我们检查该部分是否未定义时，您可以删除该部分，因为空数组将返回false

constructor() {
    super();
    this.state = {
      data: []
    };
  }
....
....
//in render function
{this.state.data? this.showTickets(this.state.data.tickets) : null}
...

---

showTickets将返回未定义的内容，因为您实际上不返回任何内容。。。WTickets是否为预期数组并不重要。也许它应该是：返回WTickets？WTickets.地图…：[];为包括我在内的未来访客添加以下内容：p；另一种解决方案是修改如何将state设置为使用async/await，因为setState是异步的。这样，state.data就不会未定义。