React-native：未定义不是对象

Posted 2023-03-30

【中文标题】React-native：未定义不是对象

【英文标题】：React-native: undefined is not an object

【发布时间】：2019-02-21 20:02:15

【问题描述】：

可能这是一个新手问题...我得到一个 json 响应，其中一个 fetch() 中的对象运行到 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 正在使用 async await 运行，但仍然首先显示“未定义”。

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

请哪位好心人帮帮我？

【问题讨论】：

showTickets 将返回 undefined ，因为您实际上并没有返回任何东西......如果 WTickets 是预期的数组并不重要。也许应该是：返回 WTickets ？ WTickets.map(...) : [];

【参考方案1】：

这是因为在开始时 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，当它停止未定义时，我们调用 this.showTickets。

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

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

【讨论】：

在这里为未来的访问者添加这个（包括我自己：p）；另一种解决方案是修改您设置状态的方式，改为使用 async/await，因为 setState() 是异步的。这样 state.data 不会是未定义的。