Question

可能是一个新手问题...我从运行在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>
  )
}

但是“第一个返回”是“未定义的”，生成错误，然后状态变为正确的结果。提取操作正在异步等待状态下运行，但仍会先显示“未定义”。

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

有什么好心帮助我吗？

Answer 1

这是因为在开始时this.state.data.tickets是未定义的，而您是在render函数中调用它的，它不会等到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；当它不再是未定义的时，我们称之为this.showTickets。

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

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

React-native：未定义不是对象

1 个答案: