反应:未定义不是对象

Question

这可能是一个新手问题...我从fetch（）中的对象中获得了一个json响应，该响应（）都符合componentdidmount（）上的函数。结果保存到状态

    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>
  )
}

但是"第一个返回"是"未定义"，生成错误，然后状态更改为正确的结果。fetch正在与异步一起运行，但仍显示"未定义"。

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

有帮助我的好灵魂吗？

Answer 1

这是因为在start the this.state.data.tickets是未定义的，您在渲染函数中调用它，渲染函数不会等到this.getfetch（）完成。所以..您可以做一个有条件的渲染以检查this.state.data.tickets是否存在于渲染中

替换{this.showTickets(this.state.data.tickets)}

使用{this.state.data!==undefined? this.showTickets(this.state.data.tickets) : null}

我们在这里所做的是首先检查this.state.data.tickets是否不确定。当它不确定（在开始时）时，我们返回null，当它停止不确定时，我们称之为showtickets。

您甚至可以将this.state.data初始化为一个空数组，当我们检查它是否不确定时，您可以删除该零件，因为一个空数组将返回false

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