React Native中如何正确访问state中的键值？

你遇到的问题核心是错误地使用字符串拼接方式更新数组类型的state，导致后续无法正确访问对象属性，具体原因和解决方法如下：

为什么会返回undefined？ #

你的arrayRoom是数组类型，但你用+运算符把它和传入的data对象拼接：

this.setState({arrayRoom:this.state.arrayRoom + data})

在JavaScript中，数组和对象用+运算时，会被强制转成字符串：

• 空数组[]会转为空字符串""
• 对象{id:1, name:"xxx"}会转为"[object Object]"
  最终arrayRoom会变成类似"[object Object]"的字符串，而不是你期望的数组。字符串没有.id属性，所以弹窗返回undefined。

另外你尝试的alert(this.state.arrayRoom.['id'])是语法错误，正确的对象属性访问应该是.id或者['id']，不能混合使用。

正确的解决步骤 #

1. 正确更新数组类型的State #

React要求状态是不可变的，不能直接修改原数组（比如push），需要创建新数组来更新：

• 推荐使用展开运算符（最简洁）：

this.setState({
  arrayRoom: [...this.state.arrayRoom, data] // 展开原数组，添加新对象
})

• 或者使用concat方法（不修改原数组，返回新数组）：

this.setState({
  arrayRoom: this.state.arrayRoom.concat(data)
})

2. 正确访问数组中的对象属性 #

更新后arrayRoom是包含多个对象的数组，你需要通过索引访问具体元素，比如要获取最后添加的房间ID：

handleRoomPicker(data){
  this.setState({
    arrayRoom: [...this.state.arrayRoom, data]
  }, function(){
    // 获取数组最后一个元素
    const latestRoom = this.state.arrayRoom[this.state.arrayRoom.length - 1];
    alert(latestRoom.id); // 现在能正确弹出ID了
    
    // 如果需要遍历所有房间的ID：
    // this.state.arrayRoom.forEach(room => console.log(room.id));
  })
}

内容的提问来源于stack exchange，提问作者kurniawan26